chore: using string arguments on directives (#9659)

packages/vant/src/address-edit/AddressEdit.tsx

@@ -402,7 +402,7 @@ export default defineComponent({
             )}
           </div>
           <Popup
-            v-model={[state.showAreaPopup, 'show']}
+            v-model:show={state.showAreaPopup}
             round
             teleport="body"
             position="bottom"

packages/vant/src/cascader/Cascader.tsx

@@ -280,7 +280,7 @@ export default defineComponent({
 
     const renderTabs = () => (
       <Tabs
-        v-model={[state.activeTab, 'active']}
+        v-model:active={state.activeTab}
         animated
         class={bem('tabs')}
         color={props.activeColor}

packages/vant/src/coupon-list/CouponList.tsx

@@ -200,7 +200,7 @@ export default defineComponent({
     return () => (
       <div class={bem()}>
         {renderExchangeBar()}
-        <Tabs v-model={[state.tab, 'active']} class={bem('tab')} border={false}>
+        <Tabs v-model:active={state.tab} class={bem('tab')} border={false}>
           {renderCouponTab()}
           {renderDisabledTab()}
         </Tabs>

packages/vant/src/dropdown-item/DropdownItem.tsx

@@ -174,7 +174,7 @@ export default defineComponent({
           onClick={onClickWrapper}
         >
           <Popup
-            v-model={[state.showPopup, 'show']}
+            v-model:show={state.showPopup}
             class={bem('content')}
             overlay={overlay}
             position={direction === 'down' ? 'top' : 'bottom'}

packages/vant/src/tab/test/insert.spec.tsx

@@ -7,7 +7,7 @@ test('should render correctly after inserting a tab', async () => {
   const wrapper = mount({
     render() {
       return (
-        <Tabs v-model={[this.active, 'active']}>
+        <Tabs v-model:active={this.active}>
           <Tab title="1">1</Tab>
           {this.insert && (
             <div>
@@ -37,7 +37,7 @@ test('should render correctly after inserting a tab with name', async () => {
   const wrapper = mount({
     render() {
       return (
-        <Tabs v-model={[this.active, 'active']} onChange={onChange}>
+        <Tabs v-model:active={this.active} onChange={onChange}>
           {this.insert && (
             <Tab title="bar" name="bar">
               bar

packages/vant/src/tabs/Tabs.tsx

@@ -371,9 +371,7 @@ export default defineComponent({
           renderTitle={item.$slots.title}
           activeColor={props.titleActiveColor}
           inactiveColor={props.titleInactiveColor}
-          onClick={(event: MouseEvent) => {
+          onClick={(event: MouseEvent) => onClickTab(item, index, event)}
-            onClickTab(item, index, event);
-          }}
           {...pick(item, [
             'dot',
             'badge',

packages/vant/src/tree-select/test/index.spec.tsx

@@ -151,7 +151,7 @@ test('should allow to select multiple items when activeId is array', async () =>
     render() {
       return (
         <TreeSelect
-          v-model={[this.activeId, 'activeId']}
+          v-model:activeId={this.activeId}
           items={this.items}
           mainActiveIndex={0}
         />
@@ -185,7 +185,7 @@ test('should limit the selected item number when using max prop', async () => {
     render() {
       return (
         <TreeSelect
-          v-model={[this.activeId, 'activeId']}
+          v-model:activeId={this.activeId}
           max={1}
           items={this.items}
           mainActiveIndex={0}