我最近在上一堂vue的课程。有一个奇怪的行为。当我在App.vue中更改一些东西时，它会自动重新加载并显示我的更改。但是当我在组件文件中更改一些东西时，它不会自动重新加载。我只是按照文档中关于如何设置vue 3应用程序的说明进行操作
App.Vue

<script setup>
import ProductDisplay from '@/Components/ProductDisplay.vue'
import { ref } from 'vue'

 const cart = ref(0)
 const premium = ref(true)
</script>
<template>

<div class="nav-bar"></div>
<div class="cart">{{ cart }}</div>
<ProductDisplay :premium="premium" />

</template>

组件/ProductDisplay.vue

<script setup>
import { ref, computed } from "vue";
import socksGreen from "@/assets/images/socks_green.jpeg";
import socksBlue from "@/assets/images/socks_blue.jpeg";

const props = defineProps({
  premium: Boolean,
 });

 const details = ref(["50% cotton", "30% wool", "20% polyster"]);

 const variants = ref([
   { id: 2234, color: "green", image: socksGreen, quantity: 50 },
   { id: 2235, color: "blue", image: socksBlue, quantity: 0 },
 ]);

 const inStock = computed(() => {
   return variants.value[selectedVariants.value].quantity > 0;
 });
 const selectedVariants = ref(0);

 const cart = ref(0);

 const onClick = () => {
   cart.value += 1;
 };

 const image = computed(() => {
   return variants.value[selectedVariants.value].image;
 });
const updateVariant = (index) => {
  selectedVariants.value = index;
};

const shipping = computed(() => {
  if (props.premium) {
    return "Frees"
  } else {
    return "Out of Stock";
  }
});
</script>

<template>
 <div class="product-display">
   <div class="product-container">
     <div class="product-image">
       <img :src="image" alt="" />
     </div>
     <div class="product-info">
       <h1>{{ product }}</h1>
       <p v-if="inStock">In Stock</p>
       <p v-else>Out of Stock</p>
       <p>{{ shipping }}</p>
       <ul>
         <li v-for="detail in details">{{ detail }}</li>
       </ul>
      <div
        class="color-circle"
        v-for="(variant, i) in variants"
        :style="{ backgroundColor: variant.color }"
        @mouseover="updateVariant(i)"
      ></div>
      <button
        :class="{ disabledButton: !inStock }"
        class="button"
        @click="onClick"
        :disabled="!inStock"
      >
        Add to Cart
      </button>
     </div>
   </div>
  </div>
 </template>