Vue version

3.2.37

Link to minimal reproduction

https://codesandbox.io/s/apollo-vue-computed-reactivity-8co7ec

Steps to reproduce

(Adapted from: https://github.com/vuejs/apollo/issues/1368.)

The app in the code sandox consists of a single view which runs one (mocked) query to fetch a message. The query returns a contrived Message type object, which just has an id and text.

The component runs this option API reactive query:

  apollo: {
    message: {
      query,
      variables: { id: 1 },
    },
  },

The component also has this computed property, which references the text property from the above query result:

  computed: {
   messageSubstr() {
     return this.message?.text?.substr(0, 2);
   },
 },

The value of both of these properties is rendered in the vue app. To reproduce the step, change vue dependence between 3.2.30 and 3.2.31 or later.

What is expected?

The messageSubstr property should render with a value of "He" (the substring of the original "Hello world" text value).

This works as expected when the dependency is set to 3.2.30.

What is actually happening?

The messageSubstr computed property function does not seem to be called when the query is complete, and so its value remains undefined (its initial value).

System Info

No response

Any additional comments?

The behavior can be worked around by manually updating the property (e.g. using manual: true and implementing the result callback).

Some history on this issue:

Vue 3.2.31 introduced a regression which broke vue-apollo (option API):

https://github.com/vuejs/core/issues/5415

The regression got a fix (3.2.32, https://github.com/vuejs/core/pull/5417) which seems to have fixed the original regression in part, but it appears that computed properties are still broken since 3.2.31.