Troubleshooting vue extends failure

Question

I have a pretty simple mixin that doesn't seem to be working using nuxt. It's so basic I'm at my whits end trying to figure out the bug. My component is part of a fairly complicated form composition scheme, but the mixin is super simple.

script from my component simplified

import { VInput } from 'vuetify'
import FieldMask from '~/utils/FieldMask'
import CognitoField from '~/mixins/cognitoField'
export default {
  name: 'CognitoBaseField',
  extends: [VInput, CognitoField],
  props: {
    inlineLabels: { default: true },
    noIndependantSubmission: Boolean,
    groupEdit: false,
    cognitoName: '',
    displayValue: '',
    fieldValue: '',
    placeHolder: { defalut: 'enter text' },
    label: '',
    masker: { type: Function, default: FieldMask },
    items: [],
    selected: {},
    itemText: '',
    itemValue: '',
    showForm: Boolean,
    disableEnterKeySubmission: Boolean,
  },
  data() {
    return {
      value: '',
      formActive: false,
    }
  },
  methods: {
    onCancelClick() {
      this.value = ''
      this.formActive = false
      console.log('test mixin')
      console.log(this.thisIsATest())
    },
  },
}

My mixin - verbatim

export default {
  computed: {
    testComp() {
      return 'working'
    },
  },
  methods: {
    thisIsATest() {
      return 'working'
    },
  },
}

The result here is I trigger onCancelClick on the component and the page crashes with

TypeError: this.thisIsATest is not a function

To really include a usable version of the component in this question I'd need to share a number of components so its probably not called for. Unless somebody can obviously see a glaring error, I guess the real question is how to troubleshoot this further?

Answer 1

This should do it

<script>
import CognitoField from '~/mixins/cognitoField'

export default {
  name: 'CognitoBaseField',
  mixins: [CognitoField],
}
</script>

Regarding the documentation, this pattern is no longer recommended. The usage of Composables is better on several aspects.