Vue3RefReactie.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <!-- <Demo/> -->

  {{rea1}}<br>
  {{rea2}}<br>
  {{rea3}}<br>
  {{rea4}}<br>
  <br>
  <br>
  composite:
  <br>
  <br>
  <br>
  <button @click="ch1">ch1</button>
  <button @click="ch2">ch2</button>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import Demo from './components/Demo.vue';
import {ref, reactive, watch} from 'vue';

export default {
  name: 'App',
  components: {
    //HelloWorld,
    Demo
  },
  setup(){
    
    //refs
    const rea1 = ref([1,2,3,4])
    const rea2 = ref([{
      id: 1,
      title: 'aaa'
    },{
      id: 2,
      title: 'bbb'
    }])

    //reactives
    const rea3 = reactive([1,2,3,4])
    const rea4 = reactive([{
      id: 1,
      title: 'aaa'
    },{
      id: 2,
      title: 'bbb'
    }])

    const ch1 = () => {
      rea1.value.push(5)
      rea3.push(5)
    }

     const ch2 = () => {
      rea2.value[1].title = 'ccc'
      rea4[1].title = 'ccc'
    }

    /* works for REACTIVE only */
    watch([rea2, rea4], ([foo, bar], [prevFoo, prevBar]) => {
      console.log('watch multiple - ', foo, bar)
      console.log('watch multiple - ', prevFoo, prevBar)
    })

    /* works for REF */
     watch(rea3, (a, b) => {
      console.log('watch 1 - ', a[a.length-1], b[b.length-1])
      
    })

    return {
      rea1,
      rea2,
      rea3,
      rea4,
      ch1,
      ch2
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>