I have a weird problem I can not understand. Whenever I add a computed property to my component, other methods show up as errors with the message "property xy does not exist on combined vue instance". Whenever I remove the computed property again, the errors are gone. What am I doing wrong here?

the computed property I am adding / removing is "isActive"

export default Vue.extend({
  name: "Collection",
  props: { collection: { type: Object as () => Collection } },
  data: () => ({
    loading: false
  }),
  components: { CollectionStatsList },
  computed: {
    ...mapState(["account"]),
    isActive() {
      return this.account.active_collections.find(
        (c: any) => c === this.collection.id
      );
    }
  },
  methods: {
    ...mapActions(["placeBids", "deleteCollection"]),
    handleViewAssets() {
      this.$router.push(`assets/${this.collection.slug}`);
    },
    async handlePlaceBids() {
      this.loading = true;
      await this.placeBids({ collection_slug: this.collection.slug });
      this.loading = false;
    },
    async handleDelete() {
      this.loading = true;
      await this.deleteCollection(this.collection.slug);
      this.loading = false;
    },

    async handleToggleState() {
      this.loading = true;
      await accountApi.activateCollection(
        this.account.id,
        this.collection.id,
        true
      );
      await this.$store.dispatch("getCollections");
      this.loading = false;
    },

    checkboxClass() {
      if (
        !this.account.active_collections.find(
          (c: any) => c == this.collection.id
        )
      )
        return "error";

      return "success";
    }
  }
});

CodePudding user response：

This probably is caused by a known limitation, where return types in methods and computed need to be annotated for type inference to work correctly:

export default Vue.extend({
  ⋮
  computed: {
    ...mapState(["account"]),