Vue 3 Guide

Core

Computed properties

// just a getter
const userEmail = computed(() => {
  return $store.getters.userEmail;
});

// a getter and setter
const selectedUserClientId = computed({
  get: () => {
    return $store.getters.selectedUserClientId;
  },
  set: (newVal) => {
    $store.dispatch("setSelectedUserClientId", { client_id: newVal });
  },
});

See:
How to type a computed property in the new composition API?
How to call setter for object in computed properties

Watchers / WatchEffect

import { ref, watch, watchEffect } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    ...
    // watch
    watch(route, async (nv, ov) => {
      const { data } = await api.get(`get-something/blah`)
      console.log(data)
    })

    // watchEffect
    const stateChanged = watchEffect(async () => {
      const { data } = await api.get(`get-something/blah`)
      console.log(data)
     })
     ...

Use watch when …

  1. You want to do something with one or more specific reactive objects changes
  2. You need both the old value and the new value
  3. You need it to be called lazily

Use watchEffect when …

  1. You want to do something whenever the state changes for any of your reactive objects
  2. You don’t care about the old value(s)
  3. You need it to run immediately when reactive dependencies change

See:
Vue 3 Composition API - watch and watchEffect
How to use Vue Watch and Vue watchEffect

Routes

Simply add the data to your params attribute:

<router-link :to="{ name: 'my-named-route', params: { id: 1, another_param: 'something else' } }">
Go to my page
</router-link>

See:
Vue, is there a way to pass data between routes without URL params?

Vuex

Simply add the data to your params attribute:

setup(props) {
   const store = useStore();

   watch(()=>store.getters.myvalue, function() {
      console.log('value changes detected');
   });

   return {
      myvalue: computed(() => store.getters.myvalue)
   }
},

See:
Vue3 composition api watch store value

const app = new Vue({
  el: "#app",
  data: {
    name: "",
  },
  methods: {
    onStorageUpdate(event) {
      if (event.key === "name") {
        this.name = event.newValue;
      }
    },
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
    window.addEventListener("storage", this.onStorageUpdate);
  },
  beforeDestroy() {
    window.removeEventListener("storage", this.onStorageUpdate);
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    },
  },
});

See:
Reactive localStorage object across browser tabs using Vue.js

By using JSON.stringfy(X) when storing the data and JSON.parse(X) when you fetch the data

var names = [];
names[0] = prompt("New member name?");
localStorage.setItem("names", JSON.stringify(names));
var storedNames = JSON.parse(localStorage.getItem("names"));

// ... or ...
localstorage.names = JSON.stringify(names);
var storedNames = JSON.parse(localStorage.names);

See:
How do I store an array in localStorage?

Quasar

Working with q-table