Exploring how to update reactive values in Vue.js 3 using a method from an external file.
Currently experimenting with Vue.js 3, I am looking to pass reactive values to a method defined in an external file for updating purposes.
During the testing phase of creating a count component, I encountered a situation where the value updates successfully in the increment1 method but not in the increment2 method. What changes are needed to ensure the value updates in both methods?
Related Code Snippets
<script setup lang="ts">
import { Ref, ref } from 'vue';
import { increment as increment2 } from './increment';
const count = ref(0);
const increment1 = () => {
count.value++;
}
</script>
<template>
<main>
<p>Counter Value</p>
<p>{{ count }}</p>
\ <button @click="increment1()">Action1</button>
\ <button @click="increment2(count)">Action2</button>
</main>
</template>
export const increment = (count: number) => {
count++;
}
FW/Tool versions:
Vue.js 3.2.27 TypeScript 4.7.4