<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';
  }
</script>

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.