<script setup>
  import { shallowRef } from 'vue';

  const user = shallowRef({
    name: 'Ray',
    url: 'https://israynotarray.com',
    address: {
      city: 'Kaohsiung',
      country: 'Taiwan'
    }
  });

  // 這樣寫是不會重新渲染的
  const updateAddress = () => {
    user.value.name = 'Vue 3';
  }

  // 直接重新賦予新的值，所以會重新渲染
  const updateAddress2 = () => {
    user.value = {
      name: 'Vue 3',
      url: 'https://vuejs.org',
      address: {
        city: 'Taipei',
        country: 'Taiwan'
      }
    };
  }

  const arr = shallowRef([1, 2, 3]);

  // 這樣寫是不會重新渲染的
  const updateArr = () => {
    arr.value[0] = 4;
  }

  // 直接重新賦予新的值，所以會重新渲染
  const updateArr2 = () => {
    arr.value = [4, 5, 6];
  }
</script>

<template>
  <div>
    <p>name：{{ user.name }}</p>
    <button @click="updateAddress">Update Name</button>
    <button @click="updateAddress2">Update Name 2</button>
    <p>arr：{{ arr }}</p>
    <button @click="updateArr">Update Arr</button>
    <button @click="updateArr2">Update Arr 2</button>
  </div>
</template>