老师，为什么一样的代码，结果会出现不一样的结果哈

目前看到第四章，然后设置了usePageTitle.js, 要么报奇怪的错误，要么采用和老师一样的代码，结果出现的undefineed的标题

usePageTitle.js

// usePageTitle.js
import { ref, onMounted, onBeforeUnmount } from 'vue';

const NAME = "Tech Blog"

export default function usePageTitle(title) {
  const originalTitle = ref(document.title);

  // 设置页面标题
  function updatePageTitle(newTitle) {
   document.title = newTitle + " - " + NAME;
    
  }

  // 监听路由变化，更新页面标题
  onMounted(() => {
    updatePageTitle();
  });

  onBeforeUnmount(() => {
    document.title = originalTitle.value
  });

  return {
    updatePageTitle,
  };
}

首页的代码

<script setup>

import blogApi  from '@/api/blogApi'
import { ref, onMounted } from 'vue'
import usePageTitle from '../hooks/usePageTitle'


// 修改标题
usePageTitle('首页')

const blogList = ref([])

onMounted(async() => {
  const res = await blogApi.getBlogs()
  blogList.value = res
  console.log('blogList', blogList.value)
})

</script>

<template>
  <main>
    <h1>Home</h1>
  </main>
</template>

老师帮忙看看哈，谢谢

今天又对了下视频的代码，原来是一些小地方不一致，改了就好了。以下是正确的代码

// usePageTitle.js
import { ref, onMounted, onBeforeUnmount } from 'vue';

const NAME = "Tech Blog"

export default function usePageTitle(title) {
  const originalTitle = ref(document.title);

  // 设置页面标题
  const updatePageTitle  = () => {
   document.title = title + ' - ' + NAME;
    
  };

  // 监听路由变化，更新页面标题
  onMounted(() => {
    updatePageTitle();
  });

  onBeforeUnmount(() => {
    document.title = originalTitle.value
  });

  return {
    updatePageTitle,
  };
}