chore: fix example

diff --git a/packages/vue/examples/composition/grid.html b/packages/vue/examples/composition/grid.html
index f865ab92c1a3373615f66f403debbbca044b39b7..2d2f53e9919fd525eabb6186d75d6cc4e05d5ccb 100644 (file)
--- a/packages/vue/examples/composition/grid.html
+++ b/packages/vue/examples/composition/grid.html
@@ -7,9 +7,9 @@
       <tr>
         <th v-for="key in columns"
           @click="sortBy(key)"
-          :class="{ active: sortKey == key }">
+          :class="{ active: state.sortKey == key }">
           {{ capitalize(key) }}
-          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
+          <span class="arrow" :class="state.sortOrders[key] > 0 ? 'asc' : 'dsc'">
           </span>
         </th>
       </tr>
@@ -26,7 +26,7 @@
 </script>
 <!-- DemoGrid component script -->
 <script>
-const { reactive, computed } = Vue
+const { reactive, computed, toRefs } = Vue
 
 const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
 
@@ -71,7 +71,7 @@ const DemoGrid = {
     }
 
     return {
-      ...state,
+      state,
       filteredData,
       sortBy,
       capitalize