How to fix ‘property was accessed during render but is not defined on instance.’ error with Vue.js?

To fix ‘property was accessed during render but is not defined on instance.’ error with Vue.js, we should make sure what’s referenced in the template is registered as a prop or defined as a reactive property.

For instance, we write

<template>
  <span>{{ name }}</span>
</template>

<script>
export default {
  name: "NameComponent",
  data() {
    return {
      name: ""
    };
  }
</script>

to define the NameComponent component that has the name reactive property as defined in the object returned by the data method.

Then we reference name in the template to render name‘s value.