`triggerRef()`

Forces effects depending on a shallow ref to re-run.

Since Vue 3.0 Spec ↗

Syntax

triggerRef(ref: ShallowRef): void

Parameters

Name	Type	Required	Description
`ref`	`ShallowRef`	No	The shallow ref whose dependents should be notified.

Returns

void — Nothing; queues dependent effects.

Examples

<script setup lang="ts">
import { shallowRef, triggerRef, watchEffect } from 'vue';

const list = shallowRef<number[]>([]);
watchEffect(() => console.log('len', list.value.length));

list.value.push(1);   // no trigger (in-place mutation)
triggerRef(list);     // forces watchEffect to re-run
</script>

Notes

Only needed with shallowRef (or customRef) where deep mutations are not tracked. Call triggerRef after mutating the ref's value in place so watchers/computed depending on it update. Not required when you replace .value with a new reference.