InertiaJs Vue3 bootstrap 5 toast

I have the toast working fine using in the main layout:

const { Toast } = bootstrap;

export default {
  watch: {
    "$page.props.flash.message": {
      handler() {
        if (this.$page.props.flash.message) {
          new Toast(this.$refs.el).show();
        }
      },
      deep: true,
    },
  },

The toast works fine if I redirect back to the same page as the form, but If I go to another component/page it doesn't display the toast message. For example If I have a create form on route('asset.create') and I redirect to asset.create the toast displays fine, but if I redirect to 'dashboard' it doesn't display.

If I do a v-if I can see the flash message is being passed to 'dashboard' but the toast won't activate:

<div v-if="$page.props.flash.message" class="alert">
          {{ $page.props.flash.message }}
        </div>

Any tips would be appreciated!

I fixed it by adding it to mount method like this... not sure if this is the best way?

export default {
  mounted() {
    if (this.$page.props.flash.message) {
      new Toast(this.$refs.el).show();
    }
  },
  components: {
    Link,
  },
  watch: {
    "$page.props.flash.message": {
      handler() {
        if (this.$page.props.flash.message) {
          new Toast(this.$refs.el).show();
        }
      },
      deep: true,
    },
  },
};