Vue3关于不使用reactive引用对象依旧更新，求解答

都知道在Vue3不使用reactive一般不能让引用对象进行更新，但是如果在更新前使用ref或者reactive进行更新其他数据，没有定义reactive的数据依旧可以进行更新

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>工作：{{ job.type }}</h2>
  <h2>薪水：{{ job.salary }}</h2>
  <h2>爱好：{{ hobby }}</h2>
  <h2>测试数据c：{{ job.a.b.c }}</h2>
  <h2>测试数据job2：{{ job2.ccc }}</h2>
  <button @click="changeInfo">点击修改</button>
</template>

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

export default {
  setup() {
    let name = ref('张三')
    let age = ref(18)
    let job = reactive({
      type:"前端工程师",
      salary:"30k",
      a:{
        b:{
          c:666
        }
      }
    })
    // let hobby = reactive(["跳","rap","打篮球"])
    let hobby = ["跳","rap","打篮球"]
    let job2 = {
      ccc:1
    }
    function changeInfo() {
      // name.value="李四"
      // age.value= 48
      // console.log(job)
      job.type = "UI设计师"
      // job.salary = "60k"
      // job.a.b.c = 999
      job2.ccc = 2
      hobby[0] = "唱"
    }
    //返回一个对象（常用）
    return {
      name,age,job,job2,hobby,changeInfo
    }

  }
}
</script>

<style></style>

点击按钮会修改下面爱好和测试数据job2，但是两个并未使用reactive进行响应式定义