From cf86a23c512c76bd5cbc63bf3874aedd09c5028c Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 6 Aug 2021 18:58:07 +0800
Subject: [PATCH] fix(Toast): failed to update message (#9196)

---
 src/toast/function-call.tsx  | 12 ++++++------
 src/utils/mount-component.ts |  5 ++++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/toast/function-call.tsx b/src/toast/function-call.tsx
index fff444e5b..6de78e457 100644
--- a/src/toast/function-call.tsx
+++ b/src/toast/function-call.tsx
@@ -1,4 +1,4 @@
-import { ref, App, TeleportProps, getCurrentInstance } from 'vue';
+import { ref, App, TeleportProps, getCurrentInstance, watch } from 'vue';
 import {
   extend,
   isObject,
@@ -87,14 +87,14 @@ function createInstance() {
           onClosed,
           'onUpdate:show': toggle,
         };
-
-        if (message.value) {
-          attrs.message = message.value;
-        }
-
         return <VanToast {...state} {...attrs} />;
       };
 
+      // support dynamic modification of message
+      watch(message, (val) => {
+        state.message = val;
+      });
+
       // rewrite render function
       (getCurrentInstance() as any).render = render;
 
diff --git a/src/utils/mount-component.ts b/src/utils/mount-component.ts
index e3a6dae86..052342f35 100644
--- a/src/utils/mount-component.ts
+++ b/src/utils/mount-component.ts
@@ -3,7 +3,10 @@ import { extend } from '../utils';
 import { useExpose } from '../composables/use-expose';
 
 export function usePopupState() {
-  const state = reactive({
+  const state = reactive<{
+    show: boolean;
+    [key: string]: any;
+  }>({
     show: false,
   });