vm arg in next callback in beforeRouteEnter there is an inconsistent result with <script setup>

[richex-cn]

Version

4.0.14

Reproduction link

https://codesandbox.io/s/issue-vue3-router-beforerouteenter-q81re4
https://github.com/richex-cn/issue-vue-router-beforeRouteEnter

Steps to reproduce

Open reproduction links, and open console to view result.

In the previous reproduction, The result as follows:

<script>
export default {
  beforeRouteEnter: (to, from, next) => {
    console.log("home beforeRouteEnter");
    next((vm) => {
      console.log("vm.now", vm.now); // undefined
      vm.$nextTick(() => {
        console.log("vm.now", vm.now); // undefined
      });
      vm.$nextTick(function () {
        console.log(this === vm); // true
        console.log("this.now", this.now); // undefined
        console.log("this.getName", this.getName); // undefined
      });
    });
  },
};
</script>

<script setup>
import { ref } from "vue";

console.log("home setup");

const now = ref(Date.now());
const getName = () => "Vue";
</script>

In the second example, The result as follows:

<script lang="ts">
export default {
  beforeRouteEnter: (to, from, next) => {
    console.log('home beforeRouteEnter')
    next(vm => {
      console.log('vm.now', vm.now) // undefined
      vm.$nextTick(() => {
        console.log('vm.now', vm.now) // undefined
      })
      vm.$nextTick(function () {
        console.log(this === vm) // false
        console.log('this.now', this.now) // 1649657580119
        console.log('this.getName', this.getName) // () => "Vue"
      })
    })
  }
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'

console.log('home setup')

const now = ref(Date.now())
const getName = () => 'Vue'
</script>

If you remove <script setup>, all of them are normal, You can view the detail.vue file of two reproductions.

What is expected?

Keep consistent result

What is actually happening?

Got inconsistent result

---

BTW, The current beforeRouteEnter and TypeScript don't seem to work together. Some related issues:
vuejs/vue-router#1863
#701

[posva]

Unfortunately this is inherent to how script setup works. You need to use defineExpose() if you want to use this.now and others. See the generated JS code and you will see nothing is returned inside setup.