I've recently refactored some shared code into a mixin in my Vue application.

The code works fine, but WebStorm is showing all the methods as undefined where they're used in the component template (aside from in template literals {{ }}). I therefore no longer have the functionality to Cmd + B to travel to where the function is defined which is annoying.

See example here:-

      <template v-if="(userIsGuest) && suggestedCars.length > 0">
        <div>
          Suggested cars
          <div class="suggested-icon">{{ suggestedCars.length }}</div>
        </div>

In the example above, userIsGuest and suggestedCars are both computed properties. The properties inside the v-if are both showing as undefined in my editor, but the same property inside my template literal {{ suggestedCars.length }} shows as defined.

Both are defined in my mixin like so:-

export default {
  computed: {
    userIsGuest() {
      return stuff;
    },
    suggestedCars() {
      return stuff;
    },
  }
}

When I add this. infront of both undefined properties inside my v-if they show as defined, but I didn't think I needed this. in Vue templates?

Either way - both ways work, so which is correct here?