从嵌套父对象的父组件更改道具

我试图改变我的组件道具,如果它被渲染多次。默认情况下,第一个道具将具有固定值,但组件的第二次调用将从父级的父级获取其道具。在我的示例中,来自 App.vue 没有改变道具进入 myBox.vue 这是我的 link

<template>
  <div id="app">
    {{years}}
    <myBox :years="years"/>
    <button @click="changeProp">Change prop</button>
  </div>
</template>

<script>
import myBox from "./components/myBox";

export default {
  name: "App",
  components: {
    myBox
  },
  data() {
    return {
      years: ""
    };
  },
  methods: {
    changeProp() {
      this.years = 100;
    }
  }
};
</script>

mySelect.vue

<template>
  <div class="select">
    <select>
      {{years}}
      <option v-for=" (i, index) in years" :key="index">{{i}}</option>
    </select>
  </div>
</template>

<script>
import myBox from "./myBox";
export default {
  data() {
    return {};
  },
  components: {
    myBox
  },
  props: ["years"]
};
</script>

<style>
.select {
  width: 100px;
  height: 100px;
}
</style>

<template>
  <div class="box">
    <mySelect :years="24"/>
    <mySelect :years="24"/>
    <mySelect :years="24"/>
  </div>
</template>

<script>
import mySelect from "./mySelect.vue";
export default {
  data() {
    return {
      //years: [2000, 2001, 2002, 2003, 2004, 2005, 2006],
      value: 5
    };
  },
  components: {
    mySelect
  }
};
</script>

<style>
div.box {
  width: 100%;
  height: auto;
  background: lightblue;
}
</style>

目前,我的代码生成第二个和第三个动态组件 v-if 并获取默认的props值,而我希望它是从父对象的父对象获取的。 可能吗?