error 'count' is defined but never used Vue.js

Question

Im getting this error and i dont know how to solve it... It says that my "count" is defined but never used. I'm using it in my template but it's like it doesnt feel it.

<template>
    <div class="root">

    <button v-on:click="count += 1">Thumbs up</button>
    <button v-on:click="count -= 1">Thumbs down</button>

    <div class="countResult">
    {{count}}
    </div>
    </div>
</template>

<script>

export default {
    data: () => {
        count: 0
    }
} 

here's my full error: ./src/components/voteSnippets.vue Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\x\x\x\snippets\code-snippets\src\components\voteSnippets.vue 17:9 error 'count:' is defined but never used no-unused-labels

✖ 1 problem (1 error, 0 warnings) 1 error and 0 warnings potentially fixable with the --fix option.

Answer 1

You have to return an object containing all your variables from the data function of yours. Correct code would be

export default {
data: () => {
  return {
    count: 0
  }
 }
}