How do I use a Vue single file component in a view with Typescript?

Question

I've tried many approaches and always get some kind of build or runtime error. I'm somewhat surprised I haven't been able to find a working example or post regarding this after much searching. I created a new project with Typescript using the Vue UI then create the following component:

<template>
  <div class="navigation">
    BACK | NEXT buttons go here
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class BackNext extends Vue {
}
</script>

Next, I tried to use this component in a .vue view file and this is about as close as I've gotten:

<template>
  <div class="question">
    <h1>Personal</h1>
    <back-next />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import BackNext from "../../components/BackNext.vue";
@Component
export default class Personal extends Vue {
  components = {
    'back-next': BackNext
  }
}
</script>

But this fails with the following build errors:

 ERROR  Failed to compile with 11 errors4:22:27 PM

These dependencies were not found:

* core-js/modules/es.object.get-prototype-of in ./node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
* core-js/modules/es.object.to-string in ./node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js, ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.reflect.construct in ./node_modules/@babel/runtime/helpers/esm/createSuper.js, ./node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
* core-js/modules/es.regexp.to-string in ./node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
* core-js/modules/es.string.iterator in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.symbol in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.symbol.description in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.symbol.iterator in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/web.dom-collections.iterator in ./node_modules/@babel/runtime/helpers/esm/typeof.js

To install them, you can run: npm install --save core-js/modules/es.object.get-prototype-of core-js/modules/es.object.to-string core-js/modules/es.reflect.construct core-js/modules/es.regexp.to-string core-js/modules/es.string.iterator core-js/modules/es.symbol core-js/modules/es.symbol.description core-js/modules/es.symbol.iterator core-js/modules/web.dom-collections.iterator

It's not clear that a standard new project with Typescript support enabled should need to to go off to install a bunch of dependencies to use some very standard functionality and I don't want to further mess up my project by installing a bunch of things that may or may not be needed.

npm version 6.13.4

node version 12.16.1

yarn version 1.22.4

vue version @vue/clu 4.5.3

Answer 1

You need to register it in the decorator

import BackNext from "../../components/BackNext.vue";

@Component({
  components: {
    BackNext,
  },
})

export default class Personal extends Vue {
  private dataItems = [];

...