<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',
      url: 'https://vuejs.org',
      address: {
        city: 'Taipei',
        country: 'Taiwan'
      }
    };
  }
</script>

<template>
  <div>
    <p>name：{{ user.name }}</p>
    <button @click="updateAddress">Update Name</button>
  </div>
</template>