Vue scrollBehavior не работает, когда я просматриваю $ router.push в наблюдателе изменения значения

Когда я перехожу на другую страницу с помощью routerLink или $ router.push scrollBehavior работает нормально. Но когда я пытаюсь перейти на ту же страницу наблюдателем, который запускается изменением значения ввода поля ввода, расположенного в центре домашней страницы, scrollBehavior не работает. Скорее он получает позицию внизу новой страницы, по которой осуществляется навигация. Даже если я не использую scrollBehavior, он делает то же самое.

Теперь мой вопрос: как мне добраться до верхней части страницы «О программе» с помощью наблюдателя, изменяющего входное значение?

Компонент HeadSearch:

<template>
  <div class = "search">
    <input type = "text" v-model = "tx" />
    <p>{{ tx }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tx: "",
    };
  },
  watch: {
    tx() {
      if (this.$route.path !== "/about") {
        this.$router.replace("/about");
      }
    },
  },
};
</script>

App.vue:

<template>
  <div id = "app">
    <div id = "nav">
      <router-link to = "/">Home</router-link> |
      <router-link to = "/about">About</router-link>
      <br /><br />
      <head-search></head-search>
      <br /><br />
    </div>
    <router-view />
  </div>
</template>

<script>
import HeadSearch from "./components/HeadSearch.vue";
export default {
  components: {
    HeadSearch,
  },
};
</script>

Home.vue:

<template>
  <div class = "home">
    <h1>This is Home page</h1>
    <br /><br /><br />
    <input class = "home-input" type = "text" v-model = "hTx" />
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      hTx: "",
    };
  },
  watch: {
    hTx() {
      if (this.$route.path !== "/about") {
        this.$router.push("/about");
      }
    },
  },
};
</script>

About.vue:

<template>
  <div class = "about">
    <h1>This is an about page</h1>
    <br /><br /><br /><br /><br />
    <div v-for = "(cont, index) in 30" :key = "index">
      {{ cont }} {{ index }}
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</template>

router.js:

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior(){
    return {
      x: 0,
      y: 0
    }
  }
})