Linting for v3... Lifecycle migration, remove .native, key for templates.

src/components/autocomplete/AutoComplete.vue

@@ -103,7 +103,7 @@ export default {
             }
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
     },

src/components/calendar/Calendar.vue

@@ -330,7 +330,7 @@ export default {
             this.selectionEnd = null;
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.timePickerTimer) {
             clearTimeout(this.timePickerTimer);
         }

src/components/carousel/Carousel.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :id="id" :class="['p-carousel p-component', {'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical()}]">
-		<div class="p-carousel-header" v-if="$scopedSlots.header">
+		<div class="p-carousel-header" v-if="$slots.header">
 			<slot name="header"></slot>
 		</div>
 		<div :class="contentClasses">
@@ -46,7 +46,7 @@
 				</li>
 			</ul>
 		</div>
-		<div class="p-carousel-footer" v-if="$scopedSlots.footer">
+		<div class="p-carousel-footer" v-if="$slots.footer">
 			<slot name="footer"></slot>
 		</div>
 	</div>
@@ -464,7 +464,7 @@ export default {
 			this.startAutoplay();
 		}
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		if (this.responsiveOptions) {
 			this.unbindDocumentListeners();
 		}

src/components/chart/Chart.vue

@@ -19,7 +19,7 @@ export default {
     mounted() {
         this.initChart();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.chart) {
             this.chart.destroy();
             this.chart = null;

src/components/colorpicker/ColorPicker.vue

@@ -73,7 +73,7 @@ export default {
     hueDragging: null,
     colorDragging: null,
     selfUpdate: null,
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindDocumentMouseMoveListener();
         this.unbindDocumentMouseUpListener();

src/components/contextmenu/ContextMenu.vue

@@ -44,7 +44,7 @@ export default {
             visible: false
         };
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.restoreAppend();
         this.unbindResizeListener();
         this.unbindOutsideClickListener();

src/components/contextmenu/ContextMenuSub.vue

@@ -4,7 +4,7 @@
             <template v-for="(item, i) of model">
                 <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
                     @mouseenter="onItemMouseEnter($event, item)">
-                    <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)" role="menuitem" v-ripple>
+                    <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click="onItemClick($event, item)" role="menuitem" v-ripple>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
                     </router-link>

src/components/datatable/DataTable.vue

@@ -4,15 +4,15 @@
         <div class="p-datatable-loading-overlay p-component-overlay" v-if="loading">
             <i :class="loadingIconClass"></i>
         </div>
-        <div class="p-datatable-header" v-if="$scopedSlots.header">
+        <div class="p-datatable-header" v-if="$slots.header">
             <slot name="header"></slot>
         </div>
         <DTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$scopedSlots.paginatorLeft">
+            <template #left v-if="$slots.paginatorLeft">
                 <slot name="paginatorLeft"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
+            <template #right v-if="$slots.paginatorRight">
                 <slot name="paginatorRight"></slot>
             </template>
         </DTPaginator>
@@ -27,7 +27,7 @@
                 <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                     :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                     :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                    :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots" :loading="loading"
+                    :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"
                     @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                     @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                     @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@@ -51,7 +51,7 @@
                     <DTTableBody :value="dataToRender" :columns="frozenColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                        :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots" :loading="loading"
+                        :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"
                         @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                         @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                         @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@@ -62,7 +62,7 @@
                     <DTTableBody v-if="frozenValue" :value="frozenValue" :columns="frozenColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                        :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots" :loading="loading"
+                        :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"
                         @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                         @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                         @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@@ -88,7 +88,7 @@
                     <DTTableBody :value="dataToRender" :columns="scrollableColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                        :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots" :loading="loading"
+                        :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"
                         @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                         @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                         @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@@ -99,7 +99,7 @@
                     <DTTableBody  v-if="frozenValue" :value="frozenValue" :columns="scrollableColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
-                        :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots" :loading="loading"
+                        :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"
                         @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-rightclick="onRowRightClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                         @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                         @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@@ -113,14 +113,14 @@
         </div>
         <DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$scopedSlots.paginatorLeft">
+            <template #left v-if="$slots.paginatorLeft">
                 <slot name="paginatorLeft"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
+            <template #right v-if="$slots.paginatorRight">
                 <slot name="paginatorRight"></slot>
             </template>
         </DTPaginator>
-        <div class="p-datatable-footer" v-if="$scopedSlots.footer">
+        <div class="p-datatable-footer" v-if="$slots.footer">
             <slot name="footer"></slot>
         </div>
         <div ref="resizeHelper" class="p-column-resizer-helper" style="display: none"></div>
@@ -444,7 +444,7 @@ export default {
             this.d_columnOrder = columnOrder;
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindColumnResizeEvents();
     },
     updated() {

src/components/dataview/DataView.vue

@@ -1,22 +1,22 @@
 <template>
 	<div :class="containerClass">
-		<div class="p-dataview-header" v-if="$scopedSlots.header">
+		<div class="p-dataview-header" v-if="$slots.header">
 			<slot name="header"></slot>
 		</div>
 		<DVPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
 					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}" :alwaysShow="alwaysShowPaginator" @page="onPage($event)">
-			<template #left v-if="$scopedSlots.paginatorLeft">
+			<template #left v-if="$slots.paginatorLeft">
 				<slot name="paginatorLeft"></slot>
 			</template>
-			<template #right v-if="$scopedSlots.paginatorRight">
+			<template #right v-if="$slots.paginatorRight">
 				<slot name="paginatorRight"></slot>
 			</template>
 		</DVPaginator>
 		<div class="p-dataview-content">
 			<div class="p-grid p-nogutter">
 				<template v-for="(item,index) of items">
-					<slot v-if="$scopedSlots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
+					<slot v-if="$slots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
-					<slot v-if="$scopedSlots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
+					<slot v-if="$slots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
 				</template>
 				<div v-if="empty" class="p-col">
                     <div class="p-dataview-emptymessage">
@@ -27,14 +27,14 @@
 		</div>
 		<DVPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
 					:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}" :alwaysShow="alwaysShowPaginator" @page="onPage($event)">
-			<template #left v-if="$scopedSlots.paginatorLeft">
+			<template #left v-if="$slots.paginatorLeft">
 				<slot name="paginatorLeft"></slot>
 			</template>
-			<template #right v-if="$scopedSlots.paginatorRight">
+			<template #right v-if="$slots.paginatorRight">
 				<slot name="paginatorRight"></slot>
 			</template>
 		</DVPaginator>
-		<div class="p-dataview-footer" v-if="$scopedSlots.footer">
+		<div class="p-dataview-footer" v-if="$slots.footer">
 			<slot name="footer"></slot>
 		</div>
 	</div>

src/components/deferredcontent/DeferredContent.vue

@@ -19,7 +19,7 @@ export default {
                 this.bindScrollListener();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindScrollListener();
     },
     methods: {

src/components/dialog/Dialog.vue

@@ -93,7 +93,7 @@ export default {
     mounted() {
         this.removeStylesFromMask();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.disableDocumentSettings();
     },
     methods: {

src/components/dropdown/Dropdown.vue

@@ -87,7 +87,7 @@ export default {
     currentSearchChar: null,
     previousSearchChar: null,
     searchValue: null,
-    beforeDestroy() {
+    beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
     },
@@ -441,7 +441,7 @@ export default {
                 'p-dropdown-label p-inputtext',
                 {
                     'p-placeholder': this.label === this.placeholder,
-                    'p-dropdown-label-empty': !this.$scopedSlots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
+                    'p-dropdown-label-empty': !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
                 }
             ];
         },

src/components/editor/Editor.vue

@@ -107,7 +107,7 @@ export default {
             }
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.quill = null;
     }
 }

src/components/fileupload/FileUpload.vue

@@ -24,7 +24,7 @@
                     </div>
                 </div>
             </div>
-            <div class="p-fileupload-empty" v-if="$scopedSlots.empty && !hasFiles">
+            <div class="p-fileupload-empty" v-if="$slots.empty && !hasFiles">
                 <slot name="empty"></slot>
             </div>
         </div>

src/components/fullcalendar/FullCalendar.vue

@@ -34,7 +34,7 @@ export default {
             this.initialize();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.calendar) {
             this.calendar.destroy();
             this.calendar = null;

src/components/galleria/Galleria.vue

@@ -1,11 +1,11 @@
 <template>
     <div v-if="fullScreen && (maskVisible || visible)" ref="mask" :class="maskContentClass">
         <transition name="p-galleria" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" @appear="onAppear">
-            <GalleriaContent v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$scopedSlots" @activeitem-change="onActiveItemChange" />
+            <GalleriaContent v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
         </transition>
     </div>
 
-    <GalleriaContent v-else-if="!fullScreen" v-bind="$props" :templates="$scopedSlots" @activeitem-change="onActiveItemChange" />
+    <GalleriaContent v-else-if="!fullScreen" v-bind="$props" :templates="$slots" @activeitem-change="onActiveItemChange" />
 </template>
 
 <script>
@@ -127,7 +127,7 @@ export default {
     mounted() {
         this.removeStylesFromMask();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.fullScreen) {
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }

src/components/galleria/GalleriaContent.vue

@@ -7,15 +7,15 @@
             <GalleriaItemSlot type="header" :templates="$attrs.templates"/>
         </div>
         <div class="p-galleria-content">
-            <GalleriaItem :value="$attrs.value" :activeIndex.sync="activeIndex" :circular="$attrs.circular" :templates="$attrs.templates"
+            <GalleriaItem :value="$attrs.value" v-model:activeIndex="activeIndex" :circular="$attrs.circular" :templates="$attrs.templates"
                 :showIndicators="$attrs.showIndicators" :changeItemOnIndicatorHover="$attrs.changeItemOnIndicatorHover"
-                :showItemNavigators="$attrs.showItemNavigators" :autoPlay="$attrs.autoPlay" :slideShowActive.sync="slideShowActive"
+                :showItemNavigators="$attrs.showItemNavigators" :autoPlay="$attrs.autoPlay" v-model:slideShowActive="slideShowActive"
                 @start-slideshow="startSlideShow" @stop-slideshow="stopSlideShow" />
 
-            <GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" :activeIndex.sync="activeIndex" :templates="$attrs.templates"
+            <GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" v-model:activeIndex="activeIndex" :templates="$attrs.templates"
                 :numVisible="$attrs.numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
                 :isVertical="isVertical()" :contentHeight="$attrs.verticalThumbnailViewPortHeight" :showThumbnailNavigators="$attrs.showThumbnailNavigators"
-                :slideShowActive.sync="slideShowActive" @stop-slideshow="stopSlideShow" />
+                v-model:slideShowActive="slideShowActive" @stop-slideshow="stopSlideShow" />
         </div>
         <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
             <GalleriaItemSlot type="footer" :templates="$attrs.templates"/>
@@ -48,7 +48,7 @@ export default {
     updated() {
         this.$emit('activeitem-change', this.activeIndex);
     },
-    beforeDestroy() {
+    beforeUnmount() {
 		if (this.slideShowActive) {
 			this.stopSlideShow();
 		}

src/components/galleria/GalleriaThumbnails.vue

@@ -140,7 +140,7 @@ export default {
             this.d_oldNumVisible = this.d_numVisible;
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
 		if (this.responsiveOptions) {
 			this.unbindDocumentListeners();
         }

src/components/inlinemessage/InlineMessage.vue

@@ -28,7 +28,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-inline-message p-component p-inline-message-' + this.severity, {'p-inline-message-icon-only': !this.$scopedSlots.default}];
+            return ['p-inline-message p-component p-inline-message-' + this.severity, {'p-inline-message-icon-only': !this.$slots.default}];
         },
         iconClass() {
             return ['p-inline-message-icon pi', {

src/components/megamenu/MegaMenu.vue

@@ -17,7 +17,7 @@
                                     <li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
                                     <template v-for="(item, i) of submenu.items">
                                         <li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i">
-                                            <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onLeafClick($event, item)" role="menuitem" v-ripple>
+                                            <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click="onLeafClick($event, item)" role="menuitem" v-ripple>
                                                 <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
                                                 <span class="p-menuitem-text">{{item.label}}</span>
                                             </router-link>
@@ -63,7 +63,7 @@ export default {
             activeItem: null
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindDocumentClickListener();
     },
     methods: {

src/components/menu/Menu.vue

@@ -54,7 +54,7 @@ export default {
     outsideClickListener: null,
     resizeListener: null,
     relativeAlign: false,
-    beforeDestroy() {
+    beforeUnmount() {
         this.restoreAppend();
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
@@ -161,7 +161,7 @@ export default {
                     document.getElementById(this.appendTo).removeChild(this.$refs.container);
             }
         },
-        beforeDestroy() {
+        beforeUnmount() {
             this.restoreAppend();
             this.unbindResizeListener();
             this.unbindOutsideClickListener();

src/components/menubar/Menubar.vue

@@ -30,7 +30,7 @@ export default {
             mobileActive: false
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.mobileActive = false;
         this.unbindOutsideClickListener();
     },

src/components/menubar/MenubarSub.vue

@@ -4,7 +4,7 @@
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
                 @mouseenter="onItemMouseEnter($event, item)">
                 <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
-                    @click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
+                    @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                 </router-link>
@@ -68,7 +68,7 @@ export default {
             this.bindDocumentClickListener();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindDocumentClickListener();
     },
     methods: {

src/components/multiselect/MultiSelect.vue

@@ -97,7 +97,7 @@ export default {
         };
     },
     outsideClickListener: null,
-    beforeDestroy() {
+    beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
     },
@@ -372,7 +372,7 @@ export default {
                 'p-multiselect-label',
                 {
                     'p-placeholder': this.label === this.placeholder,
-                    'p-multiselect-label-empty': !this.$scopedSlots['value'] && !this.placeholder && (!this.value || this.value.length === 0)
+                    'p-multiselect-label-empty': !this.$slots['value'] && !this.placeholder && (!this.value || this.value.length === 0)
                 }
             ];
         },

src/components/orderlist/OrderList.vue

@@ -11,8 +11,8 @@
                 <slot name="header"></slot>
             </div>
             <transition-group ref="list" name="p-orderlist-flip" tag="ul" class="p-orderlist-list" :style="listStyle" role="listbox" aria-multiselectable="multiple">
-                <template v-for="(item, i) of value">
+                <template v-for="(item, i) of value" :key="getItemKey(item, i)">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]" v-ripple
+                    <li tabindex="0" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]" v-ripple
                         @click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd"
                         role="option" :aria-selected="isSelected(item)">
                         <slot name="item" :item="item" :index="i"> </slot>

src/components/organizationchart/OrganizationChart.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="p-organizationchart p-component">
-        <OrganizationChartNode :node="value" :templates="$scopedSlots"
+        <OrganizationChartNode :node="value" :templates="$slots"
             @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible"
             @node-click="onNodeClick" :selectionMode="selectionMode" :selectionKeys="selectionKeys" />
     </div>

src/components/organizationchart/OrganizationChartNode.vue

@@ -23,9 +23,9 @@
                     </td>
                 </template>
                 <template v-if="node.children && node.children.length > 1">
-                    <template v-for="(child,i) of node.children">
+                    <template v-for="(child,i) of node.children" :key="child.key">
-                        <td :key="child.key + '_left'" class="p-organizationchart-line-left" :class="{'p-organizationchart-line-top': !(i === 0)}">&nbsp;</td>
+                        <td class="p-organizationchart-line-left" :class="{'p-organizationchart-line-top': !(i === 0)}">&nbsp;</td>
-                        <td :key="child.key + '_right'" class="p-organizationchart-line-right" :class="{'p-organizationchart-line-top': !(i === (node.children.length - 1))}">&nbsp;</td>
+                        <td class="p-organizationchart-line-right" :class="{'p-organizationchart-line-top': !(i === (node.children.length - 1))}">&nbsp;</td>
                     </template>
                 </template>
             </tr>

src/components/overlaypanel/OverlayPanel.vue

@@ -50,7 +50,7 @@ export default {
     target: null,
     outsideClickListener: null,
     resizeListener: null,
-    beforeDestroy() {
+    beforeUnmount() {
         this.restoreAppend();
         this.unbindResizeListener();
         if (this.dismissable) {

src/components/paginator/Paginator.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="p-paginator p-component" v-if="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
-        <div class="p-paginator-left-content" v-if="$scopedSlots.left">
+        <div class="p-paginator-left-content" v-if="$slots.left">
             <slot name="left" :state="currentState"></slot>
         </div>
 		<template v-for="item of templateItems">
@@ -14,7 +14,7 @@
 			<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :key="item" :rows="d_rows"
                 :options="rowsPerPageOptions" @rows-change="onRowChange($event)" />
         </template>
-        <div class="p-paginator-right-content" v-if="$scopedSlots.right">
+        <div class="p-paginator-right-content" v-if="$slots.right">
             <slot name="right" :state="currentState"></slot>
         </div>
 	</div>

src/components/panelmenu/PanelMenuSub.vue

@@ -2,7 +2,7 @@
     <ul class="p-submenu-list" role="tree">
         <template v-for="(item, i) of model">
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i">
-                <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)"
+                <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click="onItemClick($event, item)"
                     role="treeitem" :aria-expanded="isActive(item)">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>

src/components/picklist/PickList.vue

@@ -11,8 +11,8 @@
                 <slot name="sourceHeader"></slot>
             </div>
             <transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle" role="listbox" aria-multiselectable="multiple">
-                <template v-for="(item, i) of sourceList">
+                <template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]" v-ripple
+                    <li tabindex="0" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]" v-ripple
                         @click="onItemClick($event, item, i, 0)" @keydown="onItemKeyDown($event, item, i, 0)" @touchend="onItemTouchEnd" role="option" :aria-selected="isSelected(item, 0)">
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
@@ -30,8 +30,8 @@
                 <slot name="targetHeader"></slot>
             </div>
             <transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle" role="listbox" aria-multiselectable="multiple">
-                <template v-for="(item, i) of targetList">
+                <template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]" v-ripple
+                    <li tabindex="0" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]" v-ripple
                         @click="onItemClick($event, item, i, 1)" @keydown="onItemKeyDown($event, item, i, 1)" @touchend="onItemTouchEnd" role="option" :aria-selected="isSelected(item, 1)">
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>

src/components/scrollpanel/ScrollPanel.vue

@@ -35,7 +35,7 @@ export default {
             this.initialize();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindDocumentResizeListener();
 
         if (this.frame) {

src/components/sidebar/Sidebar.vue

@@ -52,7 +52,7 @@ export default {
     },
     mask: null,
     maskClickListener: null,
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindMaskClickListener();
     },
     methods: {

src/components/slider/Slider.vue

@@ -53,7 +53,7 @@ export default {
     barHeight: null,
     dragListener: null,
     mouseupListener: null,
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindDragListeners();
     },
     methods: {

src/components/steps/Steps.vue

@@ -3,7 +3,7 @@
         <ul role="tablist">
             <template v-for="(item,index) of model">
                 <li v-if="visible(item)" :key="item.to" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
-                    <router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" v-if="!isItemDisabled(item)" role="presentation">
+                    <router-link :to="item.to" class="p-menuitem-link" @click="onItemClick($event, item)" v-if="!isItemDisabled(item)" role="presentation">
                         <span class="p-steps-number">{{index + 1}}</span>
                         <span class="p-steps-title">{{item.label}}</span>
                     </router-link>

src/components/tabmenu/TabMenu.vue

@@ -3,7 +3,7 @@
         <ul ref="nav" class="p-tabmenu-nav p-reset" role="tablist">
             <template v-for="(item,i) of model">
                 <li :key="item.label + '_' + i" :class="getItemClass(item)" :style="item.style" v-if="visible(item)" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
-                    <router-link v-if="item.to && !item.disabled" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" role="presentation" v-ripple>
+                    <router-link v-if="item.to && !item.disabled" :to="item.to" class="p-menuitem-link" @click="onItemClick($event, item)" role="presentation" v-ripple>
                         <span :class="getItemIcon(item)" v-if="item.icon"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
                     </router-link>

src/components/tabpanel/TabPanel.vue

@@ -27,7 +27,7 @@ export default {
             this.$parent.tabs.push(this);
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.$parent.tabs = this.$parent.tabs.filter(tab => tab !== this);
     }
 }

src/components/terminal/Terminal.vue

@@ -42,7 +42,7 @@ export default {
     updated() {
         this.$el.scrollTop = this.$el.scrollHeight;
     },
-    beforeDestroy() {
+    beforeUnmount() {
         TerminalService.off('response', this.responseListener);
     },
     methods: {

src/components/tieredmenu/TieredMenu.vue

@@ -41,7 +41,7 @@ export default {
             visible: false
         };
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.restoreAppend();
         this.unbindResizeListener();
         this.unbindOutsideClickListener();

src/components/tieredmenu/TieredMenuSub.vue

@@ -4,7 +4,7 @@
             <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
                 @mouseenter="onItemMouseEnter($event, item)" role="none">
                 <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
-                    @click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
+                    @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                 </router-link>
@@ -64,7 +64,7 @@ export default {
             this.bindDocumentClickListener();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindDocumentClickListener();
     },
     methods: {

src/components/tree/Tree.vue

@@ -11,7 +11,7 @@
             <span class="p-tree-filter-icon pi pi-search"></span>
         </div>
         <ul class="p-tree-container" role="tree">
-            <TreeNode v-for="node of valueToRender" :key="node.key" :node="node" :templates="$scopedSlots"
+            <TreeNode v-for="node of valueToRender" :key="node.key" :node="node" :templates="$slots"
                 :expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" @node-click="onNodeClick"
                 :selectionMode="selectionMode" :selectionKeys="selectionKeys" @checkbox-change="onCheckboxChange"></TreeNode>
         </ul>

src/components/treetable/TreeTable.vue

@@ -6,15 +6,15 @@
                 <i :class="loadingIconClass"></i>
             </div>
         </div>
-        <div class="p-treetable-header" v-if="$scopedSlots.header">
+        <div class="p-treetable-header" v-if="$slots.header">
             <slot name="header"></slot>
         </div>
          <TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$scopedSlots.paginatorLeft">
+            <template #left v-if="$slots.paginatorLeft">
                 <slot name="paginatorLeft"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
+            <template #right v-if="$slots.paginatorRight">
                 <slot name="paginatorRight"></slot>
             </template>
         </TTPaginator>
@@ -32,8 +32,8 @@
                         </th>
                     </tr>
                     <tr v-if="hasColumnFilter()">
-                        <template v-for="(col,i) of columns">
+                        <template v-for="(col,i) of columns" :key="col.columnKey||col.field||i">
-                            <th :key="col.columnKey||col.field||i" :class="getFilterColumnHeaderClass(col)" :style="col.filterHeaderStyle">
+                            <th :class="getFilterColumnHeaderClass(col)" :style="col.filterHeaderStyle">
                                 <TTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
                             </th>
                         </template>
@@ -63,14 +63,14 @@
         </div>
         <TTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
-            <template #left v-if="$scopedSlots.paginatorLeft">
+            <template #left v-if="$slots.paginatorLeft">
                 <slot name="paginatorLeft"></slot>
             </template>
-            <template #right v-if="$scopedSlots.paginatorRight">
+            <template #right v-if="$slots.paginatorRight">
                 <slot name="paginatorRight"></slot>
             </template>
         </TTPaginator>
-        <div class="p-treetable-footer" v-if="$scopedSlots.footer">
+        <div class="p-treetable-footer" v-if="$slots.footer">
             <slot name="footer"></slot>
         </div>
         <div ref="resizeHelper" class="p-column-resizer-helper p-highlight" style="display: none"></div>

src/components/utils/DomHandler.js

@@ -320,8 +320,8 @@ export default class DomHandler {
     static appendChild(element, target) {
         if(this.isElement(target))
             target.appendChild(element);
-        else if(target.el && target.el.nativeElement)
+        else if(target.el && target.elElement)
-            target.el.nativeElement.appendChild(element);
+            target.elElement.appendChild(element);
         else
             throw new Error('Cannot append ' + target + ' to ' + element);
     }

src/views/Home.vue

@@ -233,7 +233,7 @@ export default {
                 this.dark = false;
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     computed: {

src/views/accordion/AccordionDemo.vue

@@ -77,7 +77,7 @@
                 <h5>Custom Headers</h5>
                 <Accordion class="accordion-custom">
                     <AccordionTab :active="true">
-                        <template slot="header">
+                        <template v-slot:header>
                             <i class="pi pi-calendar"></i>
                             <span>Header I</span>
                         </template>
@@ -86,7 +86,7 @@
                             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     </AccordionTab>
                     <AccordionTab>
-                        <template slot="header">
+                        <template v-slot:header>
                             <i class="pi pi-user"></i>
                             <span>Header II</span>
                         </template>
@@ -95,7 +95,7 @@
                             voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
                     </AccordionTab>
                     <AccordionTab>
-                        <template slot="header">
+                        <template v-slot:header>
                             <i class="pi pi-search"></i>
                             <span>Header III</span>
                             <i class="pi pi-cog"></i>

src/views/card/CardDemo.vue

@@ -9,30 +9,30 @@
 
         <div class="content-section implementation">
             <Card style="width: 25rem; margin-bottom: 2em">
-                <template slot="title">
+                <template v-slot:title>
                     Simple Card
                 </template>
-                <template slot="content">
+                <template v-slot:content>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                     quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                 </template>
             </Card>
 
             <Card style="width: 25em">
-                <template slot="header">
+                <template v-slot:header>
                     <img alt="user header" src="demo/images/usercard.png">
                 </template>
-                <template slot="title">
+                <template v-slot:title>
                     Advanced Card
                 </template>
-                <template slot="subtitle">
+                <template v-slot:subtitle>
                     Card subtitle
                 </template>
-                <template slot="content">
+                <template v-slot:content>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                     quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                 </template>
-                <template slot="footer">
+                <template v-slot:footer>
                     <Button icon="pi pi-check" label="Save" />
                     <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
                 </template>

src/views/chart/BarChartDemo.vue

@@ -50,7 +50,7 @@ export default {
             this.applyDarkTheme();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {

src/views/chart/ComboChartDemo.vue

@@ -34,7 +34,7 @@ export default {
             this.applyDarkTheme();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {

src/views/chart/DoughnutChartDemo.vue

@@ -30,7 +30,7 @@ export default {
                 this.chartOptions = this.getLightTheme();
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {

src/views/chart/LineChartDemo.vue

@@ -45,7 +45,7 @@ export default {
             this.applyDarkTheme();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {

src/views/chart/PieChartDemo.vue

@@ -30,7 +30,7 @@ export default {
                 this.chartOptions = this.getLightTheme();
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {

src/views/chart/PolarAreaChartDemo.vue

@@ -30,7 +30,7 @@ export default {
                 this.chartOptions = this.getLightTheme();
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {

src/views/chart/RadarChartDemo.vue

@@ -30,7 +30,7 @@ export default {
                 this.chartOptions = this.getLightTheme();
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {

src/views/datatable/DataTableContextMenuDemo.vue

@@ -9,7 +9,7 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" contextMenu :contextMenuSelection.sync="selectedProduct" @row-contextmenu="onRowContextMenu">
+                <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu">
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>

src/views/datatable/DataTableCrudDemo.vue

@@ -10,18 +10,18 @@
 		<div class="content-section implementation">
             <div class="card">
                 <Toolbar class="p-mb-4">
-                    <template slot="left">
+                    <template v-slot:left>
                         <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
                         <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                     </template>
 
-                    <template slot="right">
+                    <template v-slot:right>
                         <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
                         <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
                     </template>
                 </Toolbar>
 
-                <DataTable ref="dt" :value="products" :selection.sync="selectedProducts" dataKey="id"
+                <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">
@@ -68,7 +68,7 @@
                 </DataTable>
             </div>
 
-            <Dialog :visible.sync="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
+            <Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
                 <img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
                 <div class="p-field">
                     <label for="name">Name</label>
@@ -118,7 +118,7 @@
                 </template>
             </Dialog>
 
-            <Dialog :visible.sync="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
+            <Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
                 <div class="confirmation-content">
                     <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
                     <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
@@ -129,7 +129,7 @@
                 </template>
             </Dialog>
 
-            <Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
+            <Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
                 <div class="confirmation-content">
                     <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
                     <span v-if="product">Are you sure you want to delete the selected products?</span>

src/views/datatable/DataTableDemo.vue

@@ -10,7 +10,7 @@
 		<div class="content-section implementation">
             <div class="card">
                 <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">
                     <template #header>
@@ -178,13 +178,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ .p-paginator {
+::v-deep .p-paginator {
     .p-paginator-current {
         margin-left: auto;
     }
 }
 
-/deep/ .p-progressbar {
+::v-deep .p-progressbar {
     height: .5rem;
     background-color: #D8DADC;
 
@@ -198,7 +198,7 @@ export default {
     justify-content: space-between;
 }
 
-/deep/ .p-datepicker {
+::v-deep .p-datepicker {
     min-width: 25rem;
 
     td {
@@ -206,7 +206,7 @@ export default {
     }
 }
 
-/deep/ .p-datatable.p-datatable-customers {
+::v-deep .p-datatable.p-datatable-customers {
     .p-datatable-header {
         padding: 1rem;
         text-align: left;
@@ -236,7 +236,7 @@ export default {
 }
 
 @media screen and (max-width: 960px) {
-    /deep/ .p-datatable {
+    ::v-deep .p-datatable {
         &.p-datatable-customers {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {

src/views/datatable/DataTableDoc.vue

@@ -1655,7 +1655,7 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    /deep/ .p-datatable {
+    ::v-deep .p-datatable {
         &.p-datatable-responsive-demo {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {
@@ -1739,7 +1739,7 @@ export default {
     }
 }
 
-/deep/ .orange-car {
+::v-deep .orange-car {
     background-color: #344b5f !important;
     color: #ffffff !important;
 }
@@ -2583,13 +2583,13 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-/deep/ .p-paginator {
+::v-deep .p-paginator {
     .p-paginator-current {
         margin-left: auto;
     }
 }
 
-/deep/ .p-progressbar {
+::v-deep .p-progressbar {
     height: .5rem;
     background-color: #D8DADC;
 
@@ -2603,7 +2603,7 @@ export default {
     justify-content: space-between;
 }
 
-/deep/ .p-datepicker {
+::v-deep .p-datepicker {
     min-width: 25rem;
 
     td {
@@ -2611,7 +2611,7 @@ export default {
     }
 }
 
-/deep/ .p-datatable.p-datatable-customers {
+::v-deep .p-datatable.p-datatable-customers {
     .p-datatable-header {
         padding: 1rem;
         text-align: left;
@@ -2641,7 +2641,7 @@ export default {
 }
 
 @media screen and (max-width: 64em) {
-    /deep/ .p-datatable {
+    ::v-deep .p-datatable {
         &.p-datatable-customers {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {

src/views/datatable/DataTableEditDemo.vue

@@ -58,7 +58,7 @@
 
             <div class="card">
                 <h5>Row Editing</h5>
-                <DataTable :value="products3" editMode="row" dataKey="id" :editingRows.sync="editingRows"
+                <DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
                     @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
                     <Column field="code" header="Code">
                         <template #editor="slotProps">
@@ -396,7 +396,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ .editable-cells-table td.p-cell-editing {
+::v-deep .editable-cells-table td.p-cell-editing {
     padding-top: 0;
     padding-bottom: 0;
 }

src/views/datatable/DataTableFilterDemo.vue

@@ -322,13 +322,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ .p-paginator {
+::v-deep .p-paginator {
     .p-paginator-current {
         margin-left: auto;
     }
 }
 
-/deep/ .p-progressbar {
+::v-deep .p-progressbar {
     height: .5rem;
     background-color: #D8DADC;
 
@@ -342,7 +342,7 @@ export default {
     justify-content: space-between;
 }
 
-/deep/ .p-datepicker {
+::v-deep .p-datepicker {
     min-width: 25rem;
 
     td {
@@ -350,7 +350,7 @@ export default {
     }
 }
 
-/deep/ .p-datatable.p-datatable-customers {
+::v-deep .p-datatable.p-datatable-customers {
     .p-datatable-header {
         padding: 1rem;
         text-align: left;
@@ -380,7 +380,7 @@ export default {
 }
 
 @media screen and (max-width: 960px) {
-    /deep/ .p-datatable {
+    ::v-deep .p-datatable {
         &.p-datatable-customers {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {

src/views/datatable/DataTableResponsiveDemo.vue

@@ -103,7 +103,7 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    /deep/ .p-datatable {
+    ::v-deep .p-datatable {
         &.p-datatable-responsive-demo {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {
@@ -165,7 +165,7 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    /deep/ .p-datatable {
+    ::v-deep .p-datatable {
         &.p-datatable-responsive-demo {
             .p-datatable-thead > tr > th,
             .p-datatable-tfoot > tr > td {

src/views/datatable/DataTableRowExpandDemo.vue

@@ -9,7 +9,7 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" :expandedRows.sync="expandedRows" dataKey="id"
+                <DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
                     @row-expand="onRowExpand" @row-collapse="onRowCollapse">
                     <template #header>
                         <div class="table-header-container">

src/views/datatable/DataTableRowGroupDemo.vue

@@ -44,7 +44,7 @@
                 <p>Group customers by their representative.</p>
                 <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">
                     <Column field="representative.name" header="Representative"></Column>
                     <Column field="name" header="Name"></Column>

src/views/datatable/DataTableScrollDemo.vue

@@ -26,7 +26,7 @@
                 <Button label="Show" icon="pi pi-external-link" @click="openDialog" />
             </div>
 
-            <Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
+            <Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
                 <DataTable :value="customers" :scrollable="true" scrollHeight="flex">
                     <Column field="name" header="Name"></Column>
                     <Column field="country.name" header="Country"></Column>

src/views/datatable/DataTableSelectionDemo.vue

@@ -11,7 +11,7 @@
             <div class="card">
                 <h5>Single</h5>
                 <p>In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.</p>
-                <DataTable :value="products" :selection.sync="selectedProduct1" selectionMode="single" dataKey="id">
+                <DataTable :value="products" v-model:selection="selectedProduct1" selectionMode="single" dataKey="id">
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -23,7 +23,7 @@
                 <h5>Multiple</h5>
                 <p>In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
                         Setting metaKeySelection property as false enables multiple selection without meta key.</p>
-                <DataTable :value="products" :selection.sync="selectedProducts1" selectionMode="multiple" dataKey="id">
+                <DataTable :value="products" v-model:selection="selectedProducts1" selectionMode="multiple" dataKey="id">
                     <template #header>
                         Multiple Selection with MetaKey
                     </template>
@@ -33,7 +33,7 @@
                     <Column field="quantity" header="Quantity"></Column>
                 </DataTable>
 
-                <DataTable :value="products" :selection.sync="selectedProducts2" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em">
+                <DataTable :value="products" v-model:selection="selectedProducts2" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em">
                     <template #header>
                         Multiple Selection without MetaKey
                     </template>
@@ -47,7 +47,7 @@
             <div class="card">
                 <h5>Events</h5>
                 <p>row-select and row-unselects are available as selection events.</p>
-                <DataTable :value="products" :selection.sync="selectedProduct2" selectionMode="single" dataKey="id"
+                <DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id"
                     @row-select="onRowSelect" @row-unselect="onRowUnselect">
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
@@ -59,7 +59,7 @@
             <div class="card">
                 <h5>RadioButton</h5>
                 <p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
-                <DataTable :value="products" :selection.sync="selectedProduct3" dataKey="id">
+                <DataTable :value="products" v-model:selection="selectedProduct3" dataKey="id">
                     <Column selectionMode="single" headerStyle="width: 3em"></Column>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
@@ -71,7 +71,7 @@
             <div class="card">
                 <h5>Checkbox</h5>
 
-                <DataTable :value="products" :selection.sync="selectedProducts3" dataKey="id">
+                <DataTable :value="products" v-model:selection="selectedProducts3" dataKey="id">
                     <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>

src/views/datatable/DataTableStateDemo.vue

@@ -10,8 +10,8 @@
 		<div class="content-section implementation">
             <div class="card">
                 <h5>Session Storage</h5>
-                <DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters1"
+                <DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters1"
-                    :selection.sync="selectedCustomer1" selectionMode="single" dataKey="id"
+                    v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
                     stateStorage="session" stateKey="dt-state-demo-session">
                     <template #header>
                        <span class="p-input-icon-left">
@@ -69,8 +69,8 @@
 
             <div class="card">
                 <h5>Local Storage</h5>
-                <DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters2"
+                <DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters2"
-                    :selection.sync="selectedCustomer2" selectionMode="single" dataKey="id"
+                    v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
                     stateStorage="session" stateKey="dt-state-demo-local">
                     <template #header>
                        <span class="p-input-icon-left">

src/views/datatable/DataTableStyleDemo.vue

@@ -94,7 +94,7 @@ export default {
     color: #66BB6A;
 }
 
-/deep/ .row-accessories {
+::v-deep .row-accessories {
     background-color: rgba(0,0,0,.15) !important;
 
 }
@@ -155,7 +155,7 @@ export default {
     color: #66BB6A;
 }
 
-/deep/ .row-accessories {
+::v-deep .row-accessories {
     background-color: rgba(0,0,0,.15) !important;
 
 }

src/views/dataview/DataViewDemo.vue

@@ -144,7 +144,7 @@ export default {
 	vertical-align: middle;
 }
 
-/deep/ .product-list-item {
+::v-deep .product-list-item {
 	display: flex;
 	align-items: center;
 	padding: 1rem;
@@ -181,7 +181,7 @@ export default {
 	}
 }
 
-/deep/ .product-grid-item {
+::v-deep .product-grid-item {
 	margin: .5rem;
 	border: 1px solid #dee2e6;
 

src/views/dialog/DialogDemo.vue

@@ -11,7 +11,7 @@
             <div class="card">
                 <h5>Basic</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
-                <Dialog header="Header" :visible.sync="displayBasic" :style="{width: '50vw'}">
+                <Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
@@ -23,7 +23,7 @@
                 </Dialog>
 
                 <Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
-                <Dialog header="Header" :visible.sync="displayBasic2" :style="{width: '50vw'}">
+                <Dialog header="Header" v-model:visible="displayBasic2" :style="{width: '50vw'}">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                         culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -46,7 +46,7 @@
 
                 <h5>Modal</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openModal" />
-                <Dialog header="Header" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true">
+                <Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
                     <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -58,7 +58,7 @@
 
                 <h5>Confirmation</h5>
                 <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
-                <Dialog header="Confirmation" :visible.sync="displayConfirmation" :style="{width: '350px'}" :modal="true">
+                <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
                     <div class="confirmation-content">
                         <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
                         <span>Are you sure you want to proceed?</span>
@@ -71,7 +71,7 @@
 
                 <h5>Maximizable</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
-                <Dialog header="Header" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
+                <Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
                     <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -99,7 +99,7 @@
                     </div>
                 </div>
 
-                <Dialog header="Header" :visible.sync="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
+                <Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
                    <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

src/views/editor/EditorDemo.vue

@@ -14,7 +14,7 @@
 
                 <h5>Customized</h5>
                 <Editor v-model="value2" editorStyle="height: 320px">
-                    <template slot="toolbar">
+                    <template v-slot:toolbar>
                         <span class="ql-formats">
                             <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
                             <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>

src/views/galleria/GalleriaAdvancedDemo.vue

@@ -9,7 +9,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
+                <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">
                     <template #item="slotProps">

src/views/galleria/GalleriaFullScreenDemo.vue

@@ -11,7 +11,7 @@
             <div class="card">
                 <h5>With Thumbnails</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
-                    :circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic">
+                    :circular="true" :fullScreen="true" :showItemNavigators="true" v-model:visible="displayBasic">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
@@ -26,7 +26,7 @@
             <div class="card">
                 <h5>Without Thumbnails</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
-                    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2">
+                    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" v-model:visible="displayBasic2">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
@@ -40,8 +40,8 @@
 
             <div class="card">
                 <h5>Custom Content</h5>
-                <Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
+                <Galleria :value="images" v-model:activeIndex="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
-                    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
+                    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" v-model:visible="displayCustom">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>

src/views/galleria/GalleriaProgrammaticDemo.vue

@@ -14,7 +14,7 @@
                     <Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" />
                 </div>
 
-                <Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
+                <Galleria :value="images" v-model:activeIndex="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
                     </template>

src/views/multiselect/MultiSelectDemo.vue

@@ -78,7 +78,7 @@ export default {
     min-width: 15rem;
 }
 
-/deep/ .multiselect-custom {
+::v-deep .multiselect-custom {
     .p-multiselect-label:not(.p-placeholder) {
         padding-top: .25rem;
         padding-bottom: .25rem;

src/views/multiselect/MultiSelectDoc.vue

@@ -375,7 +375,7 @@ export default {
     min-width: 15rem;
 }
 
-/deep/ .multiselect-custom {
+::v-deep .multiselect-custom {
     .p-multiselect-label:not(.p-placeholder) {
         padding-top: .25rem;
         padding-bottom: .25rem;

src/views/organizationchart/OrganizationChartDemo.vue

@@ -10,7 +10,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Advanced</h5>
-                <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
+                <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">
                     <template #person="slotProps">
                         <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
@@ -182,7 +182,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/deep/ .p-organizationchart {
+::v-deep .p-organizationchart {
     .p-person {
         padding: 0;
         border: 0 none;

src/views/organizationchart/OrganizationChartDoc.vue

@@ -648,7 +648,7 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-/deep/ .p-organizationchart {
+::v-deep .p-organizationchart {
     .p-person {
         padding: 0;
         border: 0 none;

src/views/overlaypanel/OverlayPanelDemo.vue

@@ -12,7 +12,7 @@
                 <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
 
                 <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
-                    <DataTable :value="products" :selection.sync="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
+                    <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                         <Column field="name" header="Name" sortable></Column>
                         <Column header="Image">
                             <template #body="slotProps">

src/views/paginator/PaginatorDemo.vue

@@ -13,7 +13,7 @@
                 <Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
 
                 <h5>Custom</h5>
-                <Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
+                <Paginator v-model:first="first" :rows="1" :totalRecords="totalRecords2"
                     template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
                     <template #left>
                         <Button type="button" icon="pi pi-refresh" @click="reset()"/>

src/views/progressbar/ProgressBarDemo.vue

@@ -53,7 +53,7 @@ export default {
     mounted() {
         this.startProgress();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.endProgress();
     },
     components: {

src/views/progressbar/ProgressBarDoc.vue

@@ -152,7 +152,7 @@ export default {
 	mounted() {
 		this.startProgress();
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		this.endProgress();
 	}
 }

src/views/ripple/RippleDemo.vue

@@ -31,7 +31,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ .card-container {
+::v-deep .card-container {
     .card {
         width: 75px;
         height: 75px;

src/views/ripple/RippleDoc.vue

@@ -99,7 +99,7 @@ export default {}
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-/deep/ .card-container {
+::v-deep .card-container {
     .card {
         width: 75px;
         height: 75px;

src/views/scrollpanel/ScrollPanelDemo.vue

@@ -79,7 +79,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ .p-scrollpanel {
+::v-deep .p-scrollpanel {
     p {
         padding: .5rem;
         line-height: 1.5;

src/views/scrollpanel/ScrollPanelDoc.vue

@@ -155,7 +155,7 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-/deep/ .p-scrollpanel {
+::v-deep .p-scrollpanel {
     p {
         padding: .5rem;
         line-height: 1.5;

src/views/sidebar/SidebarDemo.vue

@@ -15,23 +15,23 @@
                 <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2"  />
                 <Button icon="pi pi-th-large" @click="visibleFull = true"  />
 
-                <Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
+                <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
                     <h3>Left Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
+                <Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
                     <h3>Right Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
+                <Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
                     <h3>Top Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
+                <Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
                     <h3>Bottom Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
+                <Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
                     <h3>Full Screen</h3>
                 </Sidebar>
             </div>

src/views/steps/ConfirmationDemo.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="stepsdemo-content">
         <Card>
-            <template slot="title">
+            <template v-slot:title>
                 Confirmation
             </template>
-            <template slot="content">
+            <template v-slot:content>
                 <div class="p-field p-col-12">
                     <label for="class">Name</label>
                     <b>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</b>
@@ -42,7 +42,7 @@
                     <b>{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}</b>
                 </div>
             </template>
-            <template slot="footer">
+            <template v-slot:footer>
                 <div class="p-grid p-nogutter p-justify-between">
                     <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/>

src/views/steps/PaymentDemo.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="stepsdemo-content">
         <Card>
-            <template slot="title">
+            <template v-slot:title>
                 Payment Information
             </template>
-            <template slot="subtitle">
+            <template v-slot:subtitle>
                 Enter your card details
             </template>
-            <template slot="content">
+            <template v-slot:content>
                 <div class="p-fluid p-formgrid p-grid">
                     <div class="p-field p-col-12">
                         <label for="class">Card Holder Name</label>
@@ -31,7 +31,7 @@
                     </div>
                 </div>
             </template>
-            <template slot="footer">
+            <template v-slot:footer>
                 <div class="p-grid p-nogutter p-justify-between">
                     <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />

src/views/steps/PersonalDemo.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="stepsdemo-content">
         <Card>
-            <template slot="title">
+            <template v-slot:title>
                 Personal Information
             </template>
-            <template slot="subtitle">
+            <template v-slot:subtitle>
                 Enter your personal information
             </template>
-            <template slot="content">
+            <template v-slot:content>
                 <div class="p-fluid">
                     <div class="p-field">
                         <label for="firstname">Firstname</label>
@@ -26,7 +26,7 @@
                     </div>
                 </div>
             </template>
-            <template slot="footer">
+            <template v-slot:footer>
                 <div class="p-grid p-nogutter p-justify-between">
                     <i></i>
                     <Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />

src/views/steps/SeatDemo.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="stepsdemo-content">
         <Card>
-           <template slot="title">
+           <template v-slot:title>
                 Seat Information
             </template>
-            <template slot="subtitle">
+            <template v-slot:subtitle>
                 Choose your seat
             </template>
-            <template slot="content">
+            <template v-slot:content>
                 <div class="p-fluid p-formgrid p-grid">
                     <div class="p-field p-col-12 p-md-6">
                         <label for="class">Class</label>
@@ -23,7 +23,7 @@
                     </div>
                 </div>
             </template>
-            <template slot="footer">
+            <template v-slot:footer>
                 <div class="p-grid p-nogutter p-justify-between">
                     <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />

src/views/steps/StepsDemo.vue

@@ -68,11 +68,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/deep/ b {
+::v-deep b {
     display: block
 }
 
-/deep/ .p-card-body {
+::v-deep .p-card-body {
     padding: 2rem;
 }
 </style>

src/views/support/Support.vue

@@ -59,7 +59,7 @@
 </template>
 
 <style lang="scss" scoped>
-/deep/ .pro-section {
+::v-deep .pro-section {
     display: flex;
     margin-top: .75rem;
 

src/views/tabmenu/TabMenuDemo.vue

@@ -40,7 +40,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/deep/ .tabmenudemo-content  {
+::v-deep .tabmenudemo-content  {
     padding: 2rem 1rem;
 }
 </style>

src/views/tabview/TabViewDemo.vue

@@ -38,17 +38,17 @@
                 </div>
 
                 <TabView ref="tabview2">
-                    <TabPanel header="Header I" :active.sync="active[0]">
+                    <TabPanel header="Header I" v-model:active="active[0]">
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                             ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     </TabPanel>
-                    <TabPanel header="Header II" :active.sync="active[1]">
+                    <TabPanel header="Header II" v-model:active="active[1]">
                         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                             architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                             voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
                     </TabPanel>
-                    <TabPanel header="Header III" :active.sync="active[2]">
+                    <TabPanel header="Header III" v-model:active="active[2]">
                         <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                             cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                             Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
@@ -138,7 +138,7 @@ export default {
             }, 50);
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         clearTimeout(this.timeout);
         EventBus.off('change-theme');
     },

src/views/terminal/TerminalDemo.vue

@@ -52,7 +52,7 @@ export default {
     mounted() {
         TerminalService.on('command', this.commandHandler);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         TerminalService.off('command', this.commandHandler);
     },
     components: {
@@ -66,7 +66,7 @@ p {
     margin-top: 0;
 }
 
-/deep/ .dark-demo-terminal {
+::v-deep .dark-demo-terminal {
     background-color: #212121;
     color: #ffffff;
 

src/views/terminal/TerminalDoc.vue

@@ -49,7 +49,7 @@ export default {
     mounted() {
         TerminalService.$on('command', this.commandHandler);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         TerminalService.$off('command', this.commandHandler);
     }
 }
@@ -165,7 +165,7 @@ export default {
     mounted() {
         TerminalService.$on('command', this.commandHandler);
     },
-    beforeDestroy() {
+    beforeUnmount() {
         TerminalService.$off('command', this.commandHandler);
     }
 }
@@ -176,7 +176,7 @@ p {
     margin-top: 0;
 }
 
-/deep/ .dark-demo-terminall {
+::v-deep .dark-demo-terminall {
     background-color: #212121;
     color: #ffffff;
 

src/views/theming/Theming.vue

@@ -58,7 +58,7 @@ html {
 
 <CodeHighlight>
 &lt;style lang="scss" scoped&gt;
-/deep/ .dark-panel.p-panel {
+::v-deep .dark-panel.p-panel {
     .p-panel-titlebar {
         background: #212121;
     }

src/views/toolbar/ToolbarDemo.vue

@@ -9,14 +9,14 @@
 
         <div class="content-section implementation">
             <Toolbar>
-                <template slot="left">
+                <template v-slot:left>
                     <Button label="New" icon="pi pi-plus" class="p-mr-2" />
                     <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
                     <i class="pi pi-bars p-toolbar-separator p-mr-2" />
                     <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
                 </template>
 
-                <template slot="right">
+                <template v-slot:right>
                     <Button icon="pi pi-search" class="p-mr-2" />
                     <Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
                     <Button icon="pi pi-times" class="p-button-danger" />

src/views/tree/TreeSelectionDemo.vue

@@ -10,19 +10,19 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Single Selection</h5>
-                <Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1"></Tree>
+                <Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"></Tree>
 
                 <h5>Multiple Selection with MetaKey</h5>
-                <Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1"></Tree>
+                <Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"></Tree>
 
                 <h5>Multiple Selection without MetaKey</h5>
-                <Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false"></Tree>
+                <Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false"></Tree>
 
                 <h5>Checkbox Selection</h5>
-                <Tree :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3"></Tree>
+                <Tree :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3"></Tree>
 
                 <h5>Events</h5>
-                <Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2" :metaKeySelection="false"
+                <Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2" :metaKeySelection="false"
                     @node-select="onNodeSelect" @node-unselect="onNodeUnselect"></Tree>
             </div>
         </div>

src/views/tree/TreeTemplatingDemo.vue

@@ -108,7 +108,7 @@ button {
     margin-right: .5rem;
 }
 
-/deep/ .p-tree {
+::v-deep .p-tree {
     a {
         color: #2196f3;
     }

src/views/treetable/TreeTableDoc.vue

@@ -1239,7 +1239,7 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    /deep/ {
+    ::v-deep {
         .sm-invisible {
             display: none;
         }