I'm unable to use Vue apollo in vue3 with class component. Is class component supported in vuejs/apollo version4?

[nabeelmehmood123]

Here is the code

Template Section

<template>
  <div class="home">
    {{ characters }}
  </div>
</template>

Script Section

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import gql from "graphql-tag";
// import "vue-apollo";
const CHARACTERS_QUERY = gql`
  query Characters {
    characters {
      results {
        id
        name
        image
      }
    }
  }
`;
@Options({
  apollo: {
    characters: {
      query: CHARACTERS_QUERY,
      result(resp) {
        return resp;
      },
    },
  },
})
export default class HomeView extends Vue {
  characters = [];
}
</script>

[nabeelmehmood123]

I want to display the query result in the templates section.

[sonnguyenxaion]

@nabeelmehmood123 Please delete characters = []; then it works. Please check vue-devtool you can see characters in data was updated but characters in setup() wouldn't be updated. Maybe vue apollo haven't support vue-class-component yet in vue3 yet.