this.$forceUpdate equivalent in Vue 3 - Composition API?

Question

In Vue 2, instance method this.$forceUpdate() could be used to update the component manually. How can we force update component in Vue 3 - Composition API (inside setup method) ?

setup(props, context) {
   const doSomething = () => {
     /* how to call $forceUpdate here? */
   }

   return {
       doSomething
   }
}

Thanks, in advance.

Answer 1

When I need to force an update in vue I usually add a key with a value I can change, which will then force vue to update it. That should work in vue 3 as well, though I admit I haven't ever tried it. Here's an example:

<template>
  <ComponentToUpdate
    :key="updateKey"
  />
</template>

<script>
  export default {
    data() {
      return {
        updateKey: 0,
      };
    },
    methods: {
      forceUpdate() {
        this.updateKey += 1;
      }
    }
  }
</script>

You can read more about it here: https://michaelnthiessen.com/key-changing-technique/

Answer 2

If using Options API:

<script lang="ts">
import {getCurrentInstance, defineComponent} from 'vue'
export default defineComponent({
  setup() {
    const instance = getCurrentInstance();
    instance?.proxy?.$forceUpdate();
  }
})
</script>

If using Composition API with <script setup>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
instance?.proxy?.$forceUpdate();
</script>