Vue.js - Property or method “blah” is not defined

Question

Why does Vue 2 throw an error that a prop is not defined when it is statically defined in the parent template?

Note: This error is not thrown if I bring the javascript inside the .vue file's script tag as opposed to importing it.

Error:

Property or method "embedded" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property. See https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

loader.html

<div class="overlay">
  <div class="loader" v-bind:class="{ embedded }">
    <div class="loader__items">
      <div class="loader__item"></div>
      <div class="loader__item"></div>
      <div class="loader__item"></div>
      <div class="loader__item"></div>
      <div class="loader__item"></div>
    </div>
  </div>
</div>

loader.js

export default {
  props: {
    embedded: {
      default: false,
      type: Boolean,
    },
  },
};

loader.vue

<template src="./loader.html"/>
<script scr="./loader.js" lang="babel"></script>
<style src="./loader.scss" lang="scss" scoped/>

client.js

import Loader from '../../loader/loader.vue';

components: {
   Loader
}

client.html

<loader :embedded="true" />

Answer 1

Hypothesis:

When importing the loader.js file using the src="./loader.js" in the .vue file's markup the error in the initial question is thrown. This instance of the component object might be being shared between every instance of the loader component, some of which have the embedded prop passed in and some that don't. This could open the door to other calls to the <loader /> constructor over writing the prop's value on instantiation.

Solution:

Switching to an import and export inside the script tag fixes the error:

loader.vue

<template src="./loader.html" />
<script lang="babel">
    import loader from './loader';

    export default loader;
</script>
<style src="./loader.scss" lang="scss" scoped />