Combining ref with reactive for mixed-state management

<template>
  <div>
    <input v-model="user.name" placeholder="Enter your name" />
    <input v-model.number="age" placeholder="Enter your age" />
    <p>{{ user.name }}, age {{ age }}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    // 'ref' is used to create a reactive reference for a scalar value
    const age = ref(0);

    // 'reactive' is used to define a reactive state for a complex object
    const user = reactive({
      name: '',
    });

    // Return both states to be used in the template
    return {
      age,
      user,
    };
  }
};
</script>

<style>
div {
  margin: 20px;
}
</style>