The code below is for a simple counter component, but it will not work, that is, increment() and decrement() do change the value, but the template doesn't render the change.
The reason is because of the import statement. If I instead used import { ref } from 'vue'; it would work as expected. What is the difference between vue and @vue/reactivity?
I mainly ask because I am using the Vetur extension in VSCode, and when I type ref, it offers to import it for me, but it imports it from @vue/reactivity. The same with reactive.
I tried Googling for "@vue/reactivity", but it searches for the words "vue reactivity" instead, and that's not specific enough to help me find out what @vue/reactivity is.
<template>
<div>{{counter}}</div>
<button @click="decrement">-</button>
<button @click="increment">+</button>
</template>
<script>
import { ref } from '@vue/reactivity';
export default {
setup(){
const counter = ref(0);
const increment = function(){
counter.value++;
}
const decrement = function(){
counter.value--;
}
return {
counter,
increment,
decrement
}
}
}
</script>