diff --git a/demo/partials/toasts.html b/demo/partials/toasts.html
index ae8a0d1..c309cb2 100644
--- a/demo/partials/toasts.html
+++ b/demo/partials/toasts.html
@@ -25,16 +25,15 @@
     createApp({
       components: { GnToastProvider, GnButton },
       setup() {
-        const toast = useToast();
-        return { toast };
+        return {};
       },
       template: `
-        <gn-toast-provider :lifetime="4000">
+        <gn-toast-provider :lifetime="4000" ref="toastProvider">
           <div class="demo-row">
-            <gn-button variant="primary" size="sm" @click="toast.info({ title: 'Info', text: 'Vue info toast.' })">Info</gn-button>
-            <gn-button variant="success" size="sm" @click="toast.success({ title: 'Success', text: 'Vue success toast.' })">Success</gn-button>
-            <gn-button variant="warning" size="sm" @click="toast.warning({ title: 'Warning', text: 'Vue warning toast.' })">Warning</gn-button>
-            <gn-button variant="danger" size="sm" @click="toast.error({ title: 'Error', text: 'Vue error toast.' })">Error</gn-button>
+            <gn-button variant="primary" size="sm" @click="$refs.toastProvider.info({ title: 'Info', text: 'Vue info toast.' })">Info</gn-button>
+            <gn-button variant="success" size="sm" @click="$refs.toastProvider.success({ title: 'Success', text: 'Vue success toast.' })">Success</gn-button>
+            <gn-button variant="warning" size="sm" @click="$refs.toastProvider.warning({ title: 'Warning', text: 'Vue warning toast.' })">Warning</gn-button>
+            <gn-button variant="danger" size="sm" @click="$refs.toastProvider.error({ title: 'Error', text: 'Vue error toast.' })">Error</gn-button>
           </div>
         </gn-toast-provider>
       `