在 Vue 中，如果你想自动更新父组件的数据，你可以使用 Vue Router。Vue Router 可以帮助你管理路由和状态，从而实现组件间的数据共享。

以下是一个简单的例子，说明如何使用 Vue Router 和 Vue 自动更新父组件的数据：

1. 首先，你需要在你的项目中安装 Vue Router。你可以通过npm（Node Package Manager）来安装：

npm install vue-router

1. 然后，你需要在你的 src 文件夹中创建一个名为 router.js 的文件，然后添加以下代码：

```javascript import Vue from 'vue' import Router from 'vue-router' import Home from './components/Home.vue'

const routes = [ { path: '/', component: Home } ]

const router = new Router({ routes })

export default router ```

这里，我们定义了一个路由 /，并创建了一个名为 Home 的组件作为子路由。

1. 在你的 src/components 文件夹中创建一个名为 Home.vue 的文件，然后添加以下代码：

```html

```

这里，我们定义了一个简单的 Vue 组件，它将显示一个 h1 标签和一个 router-view。

1. 在你的 src/App.vue 文件中，你需要在 data 属性中设置一个变量来存储父组件的路由数据：

javascript export default { data() { return { routeData: null } }, created() { this.fetchRouteData() }, methods: { fetchRouteData() { this.routeData = this.$router.$route.data } } }

这里，我们定义了一个名为 routeData 的变量，并在 created 生命周期钩子中设置它的值。在 fetchRouteData 方法中，我们将获取父组件的路由数据并将其存储在 routeData 变量中。

1. 最后，你需要在你的 main.js 文件中注册 App.vue 组件，并使用 this.$router.push 方法来导航到父组件：

```javascript import Vue from 'vue' import App from './App.vue' import router from './router'

new Vue({ router, render: h => h(App) }).$mount('#app') ```

这里，我们首先导入 Vue 和 App.vue，然后在 router 中注册 App.vue 组件。最后，我们使用 this.$router.push 方法来导航到父组件。

现在，如果你在父组件中改变数据，Vue Router 将自动更新子组件，并显示新的数据。