<template>
    <div id="app">
  <p>姓名: {{ name }}</p>
  <p>职业: {{ state.work }}</p>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

//import { ref, reactive } from "vue";这两个都可以
import { createApp, ref, reactive } from "vue";
   export default {
     setup() {
       //const count = ref(0);
       const name = ref("Nick")
       //const object = reactive({ foo: "bar" });
       const state = reactive({ 
         work: "前端工程师" 
         });
      return {
        state,
        name,
      };
     },
   };
</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>

加一个也可以
在App.vue里面

<template>
    <div id="app">
  <p>姓名: {{ name }}</p>
  <p>职业: {{ state.work }}</p>
  <p>年龄: {{ state.age }}</p>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

//import { ref, reactive } from "vue";
import { createApp, ref, reactive } from "vue";
   export default {
     setup() {
       //const count = ref(0);
       const name = ref("Nick")
       //const object = reactive({ foo: "bar" });
       const state = reactive({ 
         work: "前端工程师",
         age: "18",
         });
      return {
        state,
        name,
      };
     },
   };
</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>