From 7b7e80d2db11d8894dacc1834dd872cf53fdf817 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 24 Sep 2020 15:34:54 +0300
Subject: [PATCH] Doc update to cover sync to v-model migration

---
 src/views/datatable/DataTableCrudDemo.vue     |  8 ++---
 src/views/datatable/DataTableDoc.vue          | 32 +++++++++----------
 .../datatable/DataTableRowExpandDemo.vue      |  2 +-
 src/views/datatable/DataTableRowGroupDemo.vue |  2 +-
 src/views/datatable/DataTableScrollDemo.vue   |  2 +-
 src/views/datatable/DataTableStateDemo.vue    |  8 ++---
 src/views/fieldset/FieldsetDoc.vue            |  4 +--
 src/views/galleria/GalleriaAdvancedDemo.vue   |  2 +-
 src/views/galleria/GalleriaFullScreenDemo.vue |  8 ++---
 .../galleria/GalleriaProgrammaticDemo.vue     |  2 +-
 .../OrganizationChartDoc.vue                  |  6 ++--
 src/views/overlaypanel/OverlayPanelDoc.vue    |  2 +-
 src/views/paginator/PaginatorDoc.vue          | 14 ++++----
 src/views/panel/PanelDoc.vue                  |  4 +--
 src/views/tabview/TabViewDoc.vue              |  8 ++---
 src/views/tree/TreeDoc.vue                    | 14 ++++----
 src/views/tree/TreeSelectionDemo.vue          | 10 +++---
 src/views/treetable/TreeTableDoc.vue          | 16 +++++-----
 .../treetable/TreeTableSelectionDemo.vue      | 10 +++---
 19 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index f858dc9ec..156525657 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -158,7 +158,7 @@
     &lt;/template&gt;
 &lt;/Toolbar&gt;
 
-&lt;DataTable ref="dt" :value="products" :selection.sync="selectedProducts" dataKey="id"
+&lt;DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="id"
     :paginator="true" :rows="10" :filters="filters"
     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"&gt;
@@ -205,7 +205,7 @@
 &lt;/DataTable&gt;
 &lt;/div&gt;
 
-&lt;Dialog :visible.sync="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid"&gt;
+&lt;Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid"&gt;
 &lt;img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" /&gt;
 &lt;div class="p-field"&gt;
     &lt;label for="name"&gt;Name&lt;/label&gt;
@@ -255,7 +255,7 @@
 &lt;/template&gt;
 &lt;/Dialog&gt;
 
-&lt;Dialog :visible.sync="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
+&lt;Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
     &lt;div class="confirmation-content"&gt;
         &lt;i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /&gt;
         &lt;span v-if="product"&gt;Are you sure you want to delete &lt;b&gt;{{product.name}}&lt;/b&gt;?&lt;/span&gt;
@@ -266,7 +266,7 @@
     &lt;/template&gt;
     &lt;/Dialog&gt;
 
-    &lt;Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
+    &lt;Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
     &lt;div class="confirmation-content"&gt;
         &lt;i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /&gt;
         &lt;span v-if="product"&gt;Are you sure you want to delete the selected products?&lt;/span&gt;
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index f9a70771c..a204c1a5c 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -459,7 +459,7 @@ export default {
 
                 <p>Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the
                 first element to display. For example setting first to zero will reset the paginator to the very first page. This property
-                also supports "sync" keyword in case you'd like your binding to be updated whenever the user changes the page.</p>
+                also supports v-model in case you'd like your binding to be updated whenever the user changes the page.</p>
 <pre v-code>
 <code><template v-pre>
 &lt;DataTable :value="cars" :paginator="true" :rows="10" :first="firstRecordIndex"&gt;
@@ -499,7 +499,7 @@ export default {
 </code></pre>
 
                 <p>In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These
-                two properties also support the "sync" keyword to get updated when the user applies sort a column.</p>
+                two properties also support the v-model directive to get updated when the user applies sort a column.</p>
 <pre v-code>
 <code><template v-pre>
 &lt;DataTable :value="cars" sortField="year" :sortOrder="1"&gt;
@@ -619,7 +619,7 @@ methods: {
 </code></pre>
 
                 <h5>Selection</h5>
-                <p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the sync keyword.
+                <p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive.
                     Alternatively column based selection can be done using radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect
                      events are provided as optional callbacks.</p>
 
@@ -629,7 +629,7 @@ methods: {
 
 <pre v-code>
 <code><template v-pre>
-&lt;DataTable :value="cars" :selection.sync="selectedCar" selectionMode="single" dataKey="vin"&gt;
+&lt;DataTable :value="cars" v-model:selection="selectedCar" selectionMode="single" dataKey="vin"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
@@ -641,7 +641,7 @@ methods: {
                 <p>In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.</p>
 <pre v-code>
 <code><template v-pre>
-&lt;DataTable :value="cars" :selection.sync="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
+&lt;DataTable :value="cars" v-model:selection="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
@@ -653,7 +653,7 @@ methods: {
                 <p>If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to toggle selection of all rows.</p>
 <pre v-code>
 <code><template v-pre>
-&lt;DataTable :value="cars" :selection.sync="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
+&lt;DataTable :value="cars" v-model:selection="selectedCars" selectionMode="multiple" dataKey="vin"&gt;
     &lt;Column selectionMode="multiple"&gt;&lt;/Column&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -681,7 +681,7 @@ methods: {
 <pre v-code>
 <code><template v-pre>
 &lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
-&lt;Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
+&lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
     &lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
         &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
         &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
@@ -913,12 +913,12 @@ export default {
 </code></pre>
 
                 <h5>Row Expansion</h5>
-                <p>Rows can be expanded to display additional content using the <i>expandedRows</i> property with the sync operator accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks that are invoked when a row is expanded or toggled.</p>
+                <p>Rows can be expanded to display additional content using the <i>expandedRows</i> property with the v-model directive accompanied by a template named "expansion". <i>row-expand</i> and <i>row-collapse</i> are optional callbacks that are invoked when a row is expanded or toggled.</p>
 
                 <p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory in row expansion functionality however being able to define it increases the performance of the table signifantly.</p>
 <pre v-code>
 <code><template v-pre>
-&lt;DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
+&lt;DataTable :value="cars" v-model:expandedRows="expandedRows" dataKey="vin"
     @row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
     &lt;template #header&gt;
         &lt;div class="table-header-container"&gt;
@@ -1128,12 +1128,12 @@ export default {
 
 </code></pre>
 
-                <p>Row Editing is defined by setting <i>cellEdit</i> as "row", defining <i>editingRows</i> with the sync operator to hold the reference to the editing rows and adding a row editor column to provide the editing controls. Note that
+                <p>Row Editing is defined by setting <i>cellEdit</i> as "row", defining <i>editingRows</i> with the v-model directive to hold the reference to the editing rows and adding a row editor column to provide the editing controls. Note that
                 since <i>editingRows</i> is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row editing.</p>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Row Editing&lt;/h3&gt;
-&lt;DataTable :value="cars" editMode="row" dataKey="vin" :editingRows.sync="editingRows"
+&lt;DataTable :value="cars" editMode="row" dataKey="vin" v-model:editingRows="editingRows"
     @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;
@@ -1300,7 +1300,7 @@ export default {
 &lt;h3&gt;Expandable Row Groups&lt;/h3&gt;
 &lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
     sortMode="single" sortField="brand" :sortOrder="1"
-    :expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
+    :expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
     @rowgroup-expand="onRowExpand" @rowgroup-collapse="onRowCollapse"&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@@ -1427,9 +1427,9 @@ export default {
                 </p>
 <pre v-code>
 <code><template v-pre>
-&lt;DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
+&lt;DataTable :value="cars" :paginator="true" :rows="10" v-model:filters="filters"
     stateStorage="session" stateKey="dt-state-demo-session"
-    :selection.sync="selectedCar" selectionMode="single" dataKey="vin"&gt;
+    v-model:selection="selectedCar" selectionMode="single" dataKey="vin"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align: right"&gt;
             &lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt;
@@ -1519,7 +1519,7 @@ export default {
                 <p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.</p>
 <pre v-code>
 <code><template v-pre>
-&lt;DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
+&lt;DataTable :value="cars" contextMenu v-model:contextMenuSelection="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
@@ -2467,7 +2467,7 @@ export default {
 <pre v-code>
 <code><template v-pre>
 &lt;DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
-    dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
+    dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters" :loading="loading"
     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"&gt;
     &lt;template #header&gt;
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index f7da575cc..915de5a89 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/src/views/datatable/DataTableRowExpandDemo.vue
@@ -74,7 +74,7 @@
                 <TabPanel header="Source">
 <pre v-code>
 <code><template v-pre>
-&lt;DataTable :value="products" :expandedRows.sync="expandedRows" dataKey="id"
+&lt;DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
     @row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
     &lt;template #header&gt;
         &lt;div class="table-header-container"&gt;
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index e46bf9990..e6788e033 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -146,7 +146,7 @@
     &lt;p&gt;Group customers by their representative.&lt;/p&gt;
     &lt;DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
         sortMode="single" sortField="representative.name" :sortOrder="1"
-        :expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"
+        :expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
         @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"&gt;
         &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
         &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index a896d0905..8294cbe0d 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -131,7 +131,7 @@
     &lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
 &lt;/div&gt;
 
-&lt;Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
+&lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
     &lt;DataTable :value="customers" :scrollable="true" scrollHeight="flex"&gt;
         &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
         &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index 3e828c49f..6c4ab86d0 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/src/views/datatable/DataTableStateDemo.vue
@@ -134,8 +134,8 @@
 <code><template v-pre>
 &lt;div class="card"&gt;
     &lt;h5&gt;Session Storage&lt;/h5&gt;
-    &lt;DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters1"
-        :selection.sync="selectedCustomer1" selectionMode="single" dataKey="id"
+    &lt;DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters1"
+        v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
         stateStorage="session" stateKey="dt-state-demo-session"&gt;
         &lt;template #header&gt;
             &lt;span class="p-input-icon-left"&gt;
@@ -193,8 +193,8 @@
 
     &lt;div class="card"&gt;
     &lt;h5&gt;Local Storage&lt;/h5&gt;
-    &lt;DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters2"
-        :selection.sync="selectedCustomer2" selectionMode="single" dataKey="id"
+    &lt;DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters2"
+        v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
         stateStorage="session" stateKey="dt-state-demo-local"&gt;
         &lt;template #header&gt;
             &lt;span class="p-input-icon-left"&gt;
diff --git a/src/views/fieldset/FieldsetDoc.vue b/src/views/fieldset/FieldsetDoc.vue
index 2e2be3f41..ef2310957 100755
--- a/src/views/fieldset/FieldsetDoc.vue
+++ b/src/views/fieldset/FieldsetDoc.vue
@@ -58,11 +58,11 @@ import Fieldset from 'primevue/fieldset';
 
 </code></pre>
 
-                <p>Use the sync operator to enable two-way binding.</p>
+                <p>Use the v-model directive to enable two-way binding.</p>
 <pre v-code>
 <code>
 &lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
-&lt;Fieldset legend="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt;
+&lt;Fieldset legend="Header Text" :toggleable="true" v-model:collapsed="isCollapsed"&gt;
 	Content
 &lt;/Fieldset&gt;
 
diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue
index 4970dff8c..c8e86e622 100644
--- a/src/views/galleria/GalleriaAdvancedDemo.vue
+++ b/src/views/galleria/GalleriaAdvancedDemo.vue
@@ -40,7 +40,7 @@
                 <TabPanel header="Source">
 <pre v-code>
 <code><template v-pre>
-&lt;Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
+&lt;Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
     :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
     :circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
     &lt;template #item="slotProps"&gt;
diff --git a/src/views/galleria/GalleriaFullScreenDemo.vue b/src/views/galleria/GalleriaFullScreenDemo.vue
index de357449a..0cd5d3655 100755
--- a/src/views/galleria/GalleriaFullScreenDemo.vue
+++ b/src/views/galleria/GalleriaFullScreenDemo.vue
@@ -65,7 +65,7 @@
 <code><template v-pre>
 &lt;h3&gt;With Thumbnails&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
-    :circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic"&gt;
+    :circular="true" :fullScreen="true" :showItemNavigators="true" v-model:visible="displayBasic"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
@@ -78,7 +78,7 @@
 
 &lt;h3&gt;Without Thumbnails&lt;/h3&gt;
 &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
-    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2"&gt;
+    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" v-model:visible="displayBasic2"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
@@ -90,8 +90,8 @@
 &lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /&gt;
 
 &lt;h3&gt;Custom Content&lt;/h3&gt;
-&lt;Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
-    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom"&gt;
+&lt;Galleria :value="images" v-model:activeIndex="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
+    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" v-model:visible="displayCustom"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
diff --git a/src/views/galleria/GalleriaProgrammaticDemo.vue b/src/views/galleria/GalleriaProgrammaticDemo.vue
index 761d19560..5cf8d9d47 100644
--- a/src/views/galleria/GalleriaProgrammaticDemo.vue
+++ b/src/views/galleria/GalleriaProgrammaticDemo.vue
@@ -35,7 +35,7 @@
     &lt;Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" /&gt;
 &lt;/div&gt;
 
-&lt;Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
+&lt;Galleria :value="images" v-model:activeIndex="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"&gt;
     &lt;template #item="slotProps"&gt;
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
     &lt;/template&gt;
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index 25ad1fe50..236c027e2 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -191,11 +191,11 @@ export default {
 </code></pre>
 
 				<h5>Selection</h5>
-				<p>Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the sync operator. Note that
+				<p>Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the v-model directive. Note that
                 selection on a particular node can be disabled if the <i>selectable</i> is false on the node instance.</p>
 <pre v-code>
 <code><template v-pre>
- &lt;OrganizationChart :value="data" selecionMode="single" :selectionKeys.sync="selectionKeys"&gt;
+ &lt;OrganizationChart :value="data" selecionMode="single" v-model:selectionKeys="selectionKeys"&gt;
     &lt;template #default="slotProps"&gt;
         &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
     &lt;/template&gt;
@@ -496,7 +496,7 @@ export default {
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Advanced&lt;/h3&gt;
-&lt;OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
+&lt;OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
     @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand"&gt;
     &lt;template #person="slotProps"&gt;
         &lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index 571826535..2b0b539b9 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -163,7 +163,7 @@ toggle(event) {
 &lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
 
 &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt;
-    &lt;DataTable :value="products" :selection.sync="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"&gt;
+    &lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"&gt;
         &lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
         &lt;Column header="Image"&gt;
             &lt;template #body="slotProps"&gt;
diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue
index ebfb5d843..3810537c5 100755
--- a/src/views/paginator/PaginatorDoc.vue
+++ b/src/views/paginator/PaginatorDoc.vue
@@ -26,10 +26,10 @@ import Paginator from 'primevue/paginator';
 
 </code></pre>
 
-                <p>Use the sync operator to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.</p>
+                <p>Use the v-model directive to enable two-way binding, this is useful in cases where you need to programmatically control the paginator.</p>
 <pre v-code>
 <code>
-&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
+&lt;Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
@@ -37,15 +37,15 @@ import Paginator from 'primevue/paginator';
                 <p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.</p>
 <pre v-code>
 <code>
-&lt;Paginator :first.sync="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
+&lt;Paginator v-model:first="offset" :rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
-                <p>As <i>rows</i> also change when the dropdown changes, use the optional sync operator if you need two-way binding.</p>
+                <p>As <i>rows</i> also change when the dropdown changes, use the optional v-model directive if you need two-way binding.</p>
 
 <pre v-code>
 <code>
-&lt;Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
+&lt;Paginator v-model:first="offset" v-model:rows="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
 
 </code></pre>
 
@@ -83,7 +83,7 @@ import Paginator from 'primevue/paginator';
                 </p>
 <pre v-code>
 <code><template v-pre>
-&lt;Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
+&lt;Paginator v-model:first="offset" :rows="10" :totalRecords="totalItemsCount"&gt;
     &lt;template #left="slotProps"&gt;
         Page: &#123;&#123;slotProps.state.page&#125;&#125;
         First: &#123;&#123;slotProps.state.first&#125;&#125;
@@ -266,7 +266,7 @@ onPage(event) {
 &lt;Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
 
 &lt;h3&gt;Custom&lt;/h3&gt;
-&lt;Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
+&lt;Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2"
     template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt;
     &lt;template #left&gt;
         &lt;Button type="button" icon="pi pi-refresh" @click="reset()"/&gt;
diff --git a/src/views/panel/PanelDoc.vue b/src/views/panel/PanelDoc.vue
index 91b272b37..28d18c10e 100755
--- a/src/views/panel/PanelDoc.vue
+++ b/src/views/panel/PanelDoc.vue
@@ -57,12 +57,12 @@ import Panel from 'primevue/panel';
 
 </code></pre>
 
-                <p>Use the sync operator to enable two-way binding.</p>
+                <p>Use the v-model directive to enable two-way binding.</p>
 
 <pre v-code>
 <code>
 &lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
-&lt;Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt;
+&lt;Panel header="Header Text" :toggleable="true" v-model:collapsed="isCollapsed"&gt;
 	Content
 &lt;/Panel&gt;
 
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index 0f0f2b0f1..be911d3f2 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -105,7 +105,7 @@ import TabPanel from 'primevue/tabpanel';
 </code></pre>
 
                 <h5>Programmatic Control</h5>
-				<p>Tabs can be controlled programmatically using active property that defines the active tab.</p>
+				<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
 <pre v-code>
 <code>
 &lt;Button @click="active = 0" class="p-button-text" label="Activate 1st" /&gt;
@@ -113,13 +113,13 @@ import TabPanel from 'primevue/tabpanel';
 &lt;Button @click="active = 2" class="p-button-text" label="Activate 3rd" /&gt;
 
 &lt;TabView v-model:activeIndex="active"&gt;
-    &lt;TabPanel header="Header I" :active.sync="active[0]"&gt;
+    &lt;TabPanel header="Header I"&gt;
         Content I
     &lt;/TabPanel&gt;
-    &lt;TabPanel header="Header II" :active.sync="active[1]"&gt;
+    &lt;TabPanel header="Header II"&gt;
         Content II
     &lt;/TabPanel&gt;
-    &lt;TabPanel header="Header III" :active.sync="active[2]"&gt;
+    &lt;TabPanel header="Header III"&gt;
        Content III
     &lt;/TabPanel&gt;
 &lt;/TabView&gt;
diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue
index 94441fb01..d3f665629 100755
--- a/src/views/tree/TreeDoc.vue
+++ b/src/views/tree/TreeDoc.vue
@@ -192,7 +192,7 @@ export default class NodeService {
 
                 <h5>Programmatic Control</h5>
                 <p>Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys
-                    that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the sync modifier.
+                    that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
                 </p>
 
                 <p>Example below expands and collapses all nodes with buttons.</p>
@@ -276,7 +276,7 @@ export default {
 </code></pre>
 
                 <h5>Selection</h5>
-                <p>Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the sync operator and the <i>selectionMode</i> properties to enable the selection.
+                <p>Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the v-model directive and the <i>selectionMode</i> properties to enable the selection.
                 By default in multiple selection mode, metaKey is necessary to add to existing selections however this can be configured with <i>metaKeySelection</i> property. Note that
                 in touch enabled devices, Tree does not require metaKey. In addition selection on a particular node can be disabled if the <i>selectable</i> is false on the node instance.</p>
 
@@ -285,19 +285,19 @@ export default {
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Single Selection&lt;/h3&gt;
-&lt;Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1"&gt;&lt;/Tree&gt;
+&lt;Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"&gt;&lt;/Tree&gt;
 
 &lt;h3&gt;Multiple Selection with MetaKey&lt;/h3&gt;
-&lt;Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1"&gt;&lt;/Tree&gt;
+&lt;Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"&gt;&lt;/Tree&gt;
 
 &lt;h3&gt;Multiple Selection without MetaKey&lt;/h3&gt;
-&lt;Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false"&gt;&lt;/Tree&gt;
+&lt;Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false"&gt;&lt;/Tree&gt;
 
 &lt;h3&gt;Checkbox Selection&lt;/h3&gt;
-&lt;Tree :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3"&gt;&lt;/Tree&gt;
+&lt;Tree :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3"&gt;&lt;/Tree&gt;
 
 &lt;h3&gt;Events&lt;/h3&gt;
-&lt;Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2" :metaKeySelection="false"
+&lt;Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2" :metaKeySelection="false"
     @node-select="onNodeSelect" @node-unselect="onNodeUnselect"&gt;&lt;/Tree&gt;
 </template>
 </code></pre>
diff --git a/src/views/tree/TreeSelectionDemo.vue b/src/views/tree/TreeSelectionDemo.vue
index 64306546a..68341312b 100755
--- a/src/views/tree/TreeSelectionDemo.vue
+++ b/src/views/tree/TreeSelectionDemo.vue
@@ -33,19 +33,19 @@
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Single Selection&lt;/h3&gt;
-&lt;Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1"&gt;&lt;/Tree&gt;
+&lt;Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"&gt;&lt;/Tree&gt;
 
 &lt;h3&gt;Multiple Selection with MetaKey&lt;/h3&gt;
-&lt;Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1"&gt;&lt;/Tree&gt;
+&lt;Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"&gt;&lt;/Tree&gt;
 
 &lt;h3&gt;Multiple Selection without MetaKey&lt;/h3&gt;
-&lt;Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false"&gt;&lt;/Tree&gt;
+&lt;Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false"&gt;&lt;/Tree&gt;
 
 &lt;h3&gt;Checkbox Selection&lt;/h3&gt;
-&lt;Tree :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3"&gt;&lt;/Tree&gt;
+&lt;Tree :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3"&gt;&lt;/Tree&gt;
 
 &lt;h3&gt;Events&lt;/h3&gt;
-&lt;Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2" :metaKeySelection="false"
+&lt;Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2" :metaKeySelection="false"
     @node-select="onNodeSelect" @node-unselect="onNodeUnselect"&gt;&lt;/Tree&gt;
 </template>
 </code></pre>
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 278b809ee..b9529ce19 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -633,7 +633,7 @@ export default {
 
                 <h5>Programmatic Control</h5>
                 <p>Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys
-                    that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the sync modifier.
+                    that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that <i>expandedKeys</i> also supports two-way binding with the v-model directive.
                 </p>
 
                 <p>Example below expands and collapses all nodes with buttons.</p>
@@ -821,7 +821,7 @@ export default {
 
                 <p>Paginator can also be programmed programmatically using a binding to the <i>first</i> property that defines the index of the
                 first element to display. For example setting first to zero will reset the paginator to the very first page. This property
-                also supports "sync" keyword in case you'd like your binding to be updated whenever the user changes the page.</p>
+                also supports the v-model directive in case you'd like your binding to be updated whenever the user changes the page.</p>
 <pre v-code>
 <code><template v-pre>
 &lt;TreeTable :value="nodes" :paginator="true" :rows="10" :first="firstRecordIndex"&gt;
@@ -858,7 +858,7 @@ export default {
 </code></pre>
 
                 <p>In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use <i>sortField</i> and <i>sortOrder</i> properties. These
-                two properties also support the "sync" keyword to get updated when the user applies sort a column.</p>
+                two properties also support the v-model directive to get updated when the user applies sort a column.</p>
 <pre v-code>
 <code><template v-pre>
 &lt;TreeTable :value="nodes" sortField="size" :sortOrder="1""&gt;
@@ -959,7 +959,7 @@ export default {
 </code></pre>
 
                 <h5>Selection</h5>
-                <p>Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the sync operator and the <i>selectionMode</i> properties to enable the selection.
+                <p>Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> selection modes. Define the <i>selectionKeys</i> with the v-model operator and the <i>selectionMode</i> properties to enable the selection.
                 By default in multiple selection mode, metaKey is necessary to add to existing selections however this can be configured with <i>metaKeySelection</i> property. Note that
                 in touch enabled devices, Tree does not require metaKey. In addition selection on a particular node can be disabled if the <i>selectable</i> is false on the node instance.</p>
 
@@ -967,28 +967,28 @@ export default {
                 in "checkbox" mode, instead of a boolean, value should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node.</p>
 <pre v-code>
 <code><template v-pre>
-&lt;TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1"&gt;
+&lt;TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
 &lt;/TreeTable&gt;
 
 &lt;h3&gt;Multiple Selection without MetaKey&lt;/h3&gt;
-&lt;TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false"&gt;
+&lt;TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
 &lt;/TreeTable&gt;
 
 &lt;h3&gt;Checkbox Selection&lt;/h3&gt;
-&lt;TreeTable :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3"&gt;
+&lt;TreeTable :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
 &lt;/TreeTable&gt;
 
 &lt;h3&gt;Events&lt;/h3&gt;
-&lt;TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2"
+&lt;TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2"
     @node-select="onNodeSelect" @node-unselect="onNodeUnselect"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
diff --git a/src/views/treetable/TreeTableSelectionDemo.vue b/src/views/treetable/TreeTableSelectionDemo.vue
index c3283646d..b2fe7834b 100755
--- a/src/views/treetable/TreeTableSelectionDemo.vue
+++ b/src/views/treetable/TreeTableSelectionDemo.vue
@@ -61,35 +61,35 @@
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Single Selection&lt;/h3&gt;
-&lt;TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1"&gt;
+&lt;TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
 &lt;/TreeTable&gt;
 
 &lt;h3&gt;Multiple Selection with MetaKey&lt;/h3&gt;
-&lt;TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1"&gt;
+&lt;TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
 &lt;/TreeTable&gt;
 
 &lt;h3&gt;Multiple Selection without MetaKey&lt;/h3&gt;
-&lt;TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false"&gt;
+&lt;TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
 &lt;/TreeTable&gt;
 
 &lt;h3&gt;Checkbox Selection&lt;/h3&gt;
-&lt;TreeTable :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3"&gt;
+&lt;TreeTable :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
 &lt;/TreeTable&gt;
 
 &lt;h3&gt;Events&lt;/h3&gt;
-&lt;TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2"
+&lt;TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2"
     @node-select="onNodeSelect" @node-unselect="onNodeUnselect"&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;