typescript - "TypeError: No se puede leer la propiedad '$router' de null" en vuetify

Estoy intentando navegar a otra página después de hacer clic en un botón en Vuetify, pero no puedo hacerlo. En la consola muestra este error:

"TypeError: Cannot read property '$router' of null"

Este es mi código:

ProductDetailsCard.vue

<v-btn @click="this.$router.push({path: '/newpage'})">Next Page</v-btn>

Esta es toda mi página ProductDetailsCard.vue https://wetransfer.com/downloads/775193b11b70a8cd03372db08ee5a56a20200522072851/4d93e3

router > index.js

import Vue from 'vue';
import Router from 'vue-router';
import NewPage from '../components/NewPage.vue';

Vue.use(Router)

export default new Router({
    base: process.eventNames.BASE_URL,
    routes: [
         {
            path: '/newpage',
            name: 'newpage',
            component: NewPage
        } 
    ]
})

Si cambio el código así:

ProductDetailsCard.vue

<v-btn @click="NewPage">Next Page</v-btn>
.....
NewPage ( ) {
        this.$router.push({ path: '/newpage'});
}

Luego muestra este error en la consola:

"TypeError: Cannot read property 'push' of undefined"

¿Alguien puede ayudar?

Respuesta #1

Solo escribe $router.push, this es para referirse al componente de Vue dentro del script.

<v-btn @click="$router.push({path: '/newpage'})">Next Page</v-btn>