Vuejs -- Computed property not being defined on the instance

Question

I'm fairly new to VueJS and I am having difficulties getting a child component to work properly.

So first off, I had some code in a "view" that I realized I wanted to use more than once, so I began to factor that code out into a separate component, but I ran into this problem:

[Vue warn]: Property or method "<feedbackCallback|stateCallback|submitCallback>" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

My setup is the following:

• Vue 2.4.2
• Webpack 3.5.5
• Bootstrap-Vue 1.0.0
• Vue-Router 2.7.0
• I'm also using Single File Components

I'm going to call the file for the "view" ViewA and the file for the "component" "CompA"

ViewA with the parts removed that weren't going into a separate component:

<template>
  [...]
  <b-form @submit="submitCallback">
    <b-form-group
      id="groupID"
      description=""
      label="Set Thing Here" :feedback="feedbackCallback"
      :state="stateCallback">
      <b-form-input
        id="inputID" :state="stateCallback"
        v-model.trim="thing">
      </b-form-input>
    </b-form/group>

    <b-button type="submit" variant="primary">Submit</b-button>
  </b-form>
  [...]
</template>

<script>
export default {
  [...]
  data () {
    return {
      thing: '',
      [...]
    }
  },
  computed: {
    stateCallback () {
      return 'invalid'
    },
    feedbackCallback () {
      return 'Please enter a valid thing'
    }
  },
  methods: {
    submitCallback (event) {
      [...]
    }
  },
  [...]
</script>

Now, I moved these guys into CompA.

This is the code now where I'm getting the error:

ViewA:

<template>
  [...]
  <comp-a v-model.trim="thing" :thingvalue="thing"></comp-a>
  [...]
</template>

<script>
import CompA from '../components/CompA'

export default {
  name: 'view-a'
  components: {
    CompA
  },
  data () {
    return {
      thing: ''
    }
  }
}
</script>

CompA:

<template>
  <b-form @submit="submitCallback">
    <b-form-group
      id="groupID"
      description=""
      label="Set Thing Here" :feedback="feedbackCallback"
      :state="stateCallback">
      <b-form-input
        id="inputID" :state="stateCallback"
        :value="thingvalue">
      </b-form-input>
    </b-form/group>

    <b-button type="submit" variant="primary">Submit</b-button>
  </b-form>
</template>

<script>
export default {
  props: {
    thingvalue: {
      type: String
      required: true
    }
  },  
  computed: {
    stateCallback () {
      return 'invalid'
    },
    feedbackCallback () {
      return 'Please enter a valid thing'
    }
  },
  methods: {
    submitCallback (event) {
      [...]
    }
  }
}
</script>

You might notice when I moved the code over, I changed the v-model.trim="thing" to :value="thing". I was getting the same error with thing until I did this.

Now is there something I'm missing? I've been digging a lot to try and understand. I even looked at some of bootstrap-vue's code to see if they do anything funky. But it turns out they have some computed properties being used in a very similar fashion. So I'm not understanding where the problem is happening. Let me know if you need more information.

Update

I'm more convinced that there is something going on with WebPack and VueJS as I'm not finding any definition of these properties/methods in the bundled up js file.

Answer 1

Well turns out it was simply a dumb mistake on my part. Did not have a closing script tag. Eslint wasn't catching either (maybe there is a setting to make sure it does), so it compiled with webpack just fine. Lesson: Always remember your closing tag!