Version

3.0.2

Reproduction link

https://codesandbox.io/s/elastic-dream-x4mdu?file=/src/app.vue

Steps to reproduce

1. Click the button and observe the reactivity of the computed pointing to the active attribute

What is expected?

Should see that a computed watching a property on context.attrs would react to changes.

What is actually happening?

The $attrs is reactive but the computed watching context.attrs is not.

I believe this is intended, based on the docs.

From the docs:

The context object is a normal JavaScript object, i.e., it is not reactive [...] [a]lso note that unlike props, attrs and slots are not reactive

I believe this is intended, based on the docs.

Ah right. Do you know any ways to overcome these constraints? I'm using onBeforeUpdate at the moment.

Using props may solve this issue, props is reactive.

// Child.vue

<template>
  <div>props = {{ $props }}</div>
  <div>props.active = {{ $props.active }}</div>
  <div>computed(() => props.active) = {{ active1 }}</div>
</template>

<script>
import { computed, isReactive } from "vue";

export default {
  props: {
    active: Boolean,
  },
  setup(props) {
    console.log("props: isReacitve = ", isReactive(props));

    const active1 = computed(() => props.active);

    return {
      active1,
    };
  },
};
</script>