Vue.js Reactivity

import { ref } from 'vue';
const count = ref(0); # create reactive reference
count.value++; # access/modify with .value

import { reactive } from 'vue';
const state = reactive({ # create reactive object
    count: 0,
    name: 'John'
});
state.count++; # direct access (no .value)

import { computed } from 'vue';
const doubleCount = computed(() => { # computed property
    return count.value * 2
});

import { watch } from 'vue';
watch(count, (newVal, oldVal) => { # watch ref
    console.log(newVal);
});

import { watchEffect } from 'vue';
watchEffect(() => { # auto-track dependencies
    console.log(count.value);
});

import { toRefs } from 'vue';
const { count, name } = toRefs(state); # destructure while keeping reactivity