[Vue.js]ボタンを押したら文字に取り消し線が追加されるように実装したい

環境

vue 2.0
vue cli
vuetify
firebase

コード

vue
1<template>
2  <v-container>
3    <v-row class="text-center">
4
5      <v-col class="mb-20">
6        <v-layout wrapper>
7          <v-icon
8            large
9            color="blue darken-2"
10            class="mr-3"
11          >
12            mdi-message-text
13          </v-icon>
14          <h2 class="title font-weight-bold mb-3">
15            死ぬまでにやりたいことリスト <br />
16          </h2>
17        </v-layout>
18        <h2 class="title font-weight-bold mb-3">
19          ~List of things to do before you die~
20        </h2>
21
22        <div class="mt-20">
23          <p></p>
24        </div>
25        <v-form>
26          <v-container>
27            <v-row>
28              <v-col cols="12" sm="12">
29                <v-layout wrap>
30                  <v-text-field v-model="newTodoName" solo placeholder="やりたいこと"></v-text-field>
31                  <v-btn @click="addTodo()" class="mx-2" fab dark color="indigo">
32                    <v-icon dark>
33                      mdi-plus
34                    </v-icon>
35                  </v-btn>
36                </v-layout>
37              </v-col>
38            </v-row>
39          </v-container>
40        </v-form>
41      </v-col>
42
43      <v-col class="mb-5" cols="12">
44        <v-row justify="center" v-for="(todo,key) in todos" :key="key">
45          <v-layout wrapper>
46            <input 
47              type="checkbox"
48              id="target"
49              v-model="todo.isComplete" 
50              @click="updateTodo(todo, key)"
51              style="transform:scale(2.0);" 
52              class="mx-5" 
53              text-size="16px"/>
54            {{ todo.name }}
55            <v-btn
56              @click="removeTodo(key)"
57              class="mx-4 mb-5"
58              fab
59              dark
60              x-small
61              color="primary"
62              bottom="5%"
63            >
64              <v-icon dark>
65                mdi-minus
66              </v-icon>
67            </v-btn>
68          </v-layout>
69
70        </v-row>
71      </v-col>
72    </v-row>
73  </v-container>
74</template>
75
76<script>
77import firebase from 'firebase'
78
79export default {
80  name: "HelloWorld",
81  created(){
82    this.db = firebase.firestore()
83    this.todosRef = this.db.collection('todos')
84    //todoのデータが変わったとき（追加、削除など）、リスナーを登録して、処理を行う
85    this.todosRef.onSnapshot(querySnapshot => { //querySnapshot=現在の全てのデータ
86      const obj = {}
87      querySnapshot.forEach(doc => { //doc=firebaseのデータ内のドキュメント
88        //doc.id=ドキュメントのID doc.data=コレクション
89        obj[doc.id] = doc.data()
90      })
91      this.todos = obj
92    })
93  },
94
95  data: () => ({
96   db :null,
97   todosRef: null,
98   newTodoName: '',
99   todos: {},
100  }),
101  methods: {
102    addTodo(){
103      if(this.newTodoName === ''){ return }
104      this.todosRef.add({
105        name: this.newTodoName,
106        isComplete: false,
107      }),
108      this.newTodoName = ''
109    },
110    updateTodo(todo, key){
111      todo.isComplete = !todo.isComplete
112      this.todosRef.doc(key).update(todo)
113      
114      var id = document.getElementById(todo);
115        if(todo.isComplete == true){
116          id.style.textDecoration = "line-through";
117        }else{
118         id.style.textDecoration = "none";
119        }
120    },
121    removeTodo(key){
122      this.todosRef.doc(key).delete()
123    } 
124  }
125};
126</script>
127
128<style>
129.v-application {
130  font-family: "M Plus 1p" !important;
131}
132
133  .v-text-field input {
134    font-size: 1em;
135  }
136</style>
137

やりたいこと

右のチェックボックスを押したら、todoの文字に取り消し線が追加されるようにしたい

vue
1    updateTodo(todo, key){
2      todo.isComplete = !todo.isComplete
3      this.todosRef.doc(key).update(todo)
4      
5      var id = document.getElementById(todo);
6        if(todo.isComplete == true){
7          id.style.textDecoration = "line-through";
8        }else{
9         id.style.textDecoration = "none";
10        }
11    },