From efefea2edd7c08be77acd3be68a019ff9da851ef Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 17 Sep 2020 15:19:11 +0300
Subject: [PATCH] Linting for v3... Lifecycle migration, remove .native, key
 for templates.

---
 src/components/autocomplete/AutoComplete.vue  |  2 +-
 src/components/calendar/Calendar.vue          |  2 +-
 src/components/carousel/Carousel.vue          |  6 ++---
 src/components/chart/Chart.vue                |  2 +-
 src/components/colorpicker/ColorPicker.vue    |  2 +-
 src/components/contextmenu/ContextMenu.vue    |  2 +-
 src/components/contextmenu/ContextMenuSub.vue |  2 +-
 src/components/datatable/DataTable.vue        | 24 +++++++++----------
 src/components/dataview/DataView.vue          | 16 ++++++-------
 .../deferredcontent/DeferredContent.vue       |  2 +-
 src/components/dialog/Dialog.vue              |  2 +-
 src/components/dropdown/Dropdown.vue          |  4 ++--
 src/components/editor/Editor.vue              |  2 +-
 src/components/fileupload/FileUpload.vue      |  2 +-
 src/components/fullcalendar/FullCalendar.vue  |  2 +-
 src/components/galleria/Galleria.vue          |  6 ++---
 src/components/galleria/GalleriaContent.vue   | 10 ++++----
 .../galleria/GalleriaThumbnails.vue           |  2 +-
 .../inlinemessage/InlineMessage.vue           |  2 +-
 src/components/megamenu/MegaMenu.vue          |  4 ++--
 src/components/menu/Menu.vue                  |  4 ++--
 src/components/menubar/Menubar.vue            |  2 +-
 src/components/menubar/MenubarSub.vue         |  4 ++--
 src/components/multiselect/MultiSelect.vue    |  4 ++--
 src/components/orderlist/OrderList.vue        |  4 ++--
 .../organizationchart/OrganizationChart.vue   |  2 +-
 .../OrganizationChartNode.vue                 |  6 ++---
 src/components/overlaypanel/OverlayPanel.vue  |  2 +-
 src/components/paginator/Paginator.vue        |  4 ++--
 src/components/panelmenu/PanelMenuSub.vue     |  2 +-
 src/components/picklist/PickList.vue          |  8 +++----
 src/components/scrollpanel/ScrollPanel.vue    |  2 +-
 src/components/sidebar/Sidebar.vue            |  2 +-
 src/components/slider/Slider.vue              |  2 +-
 src/components/steps/Steps.vue                |  2 +-
 src/components/tabmenu/TabMenu.vue            |  2 +-
 src/components/tabpanel/TabPanel.vue          |  2 +-
 src/components/terminal/Terminal.vue          |  2 +-
 src/components/tieredmenu/TieredMenu.vue      |  2 +-
 src/components/tieredmenu/TieredMenuSub.vue   |  4 ++--
 src/components/tree/Tree.vue                  |  2 +-
 src/components/treetable/TreeTable.vue        | 16 ++++++-------
 src/components/utils/DomHandler.js            |  4 ++--
 src/views/Home.vue                            |  2 +-
 src/views/accordion/AccordionDemo.vue         |  6 ++---
 src/views/card/CardDemo.vue                   | 14 +++++------
 src/views/chart/BarChartDemo.vue              |  2 +-
 src/views/chart/ComboChartDemo.vue            |  2 +-
 src/views/chart/DoughnutChartDemo.vue         |  2 +-
 src/views/chart/LineChartDemo.vue             |  2 +-
 src/views/chart/PieChartDemo.vue              |  2 +-
 src/views/chart/PolarAreaChartDemo.vue        |  2 +-
 src/views/chart/RadarChartDemo.vue            |  2 +-
 .../datatable/DataTableContextMenuDemo.vue    |  2 +-
 src/views/datatable/DataTableCrudDemo.vue     | 12 +++++-----
 src/views/datatable/DataTableDemo.vue         | 12 +++++-----
 src/views/datatable/DataTableDoc.vue          | 14 +++++------
 src/views/datatable/DataTableEditDemo.vue     |  4 ++--
 src/views/datatable/DataTableFilterDemo.vue   | 10 ++++----
 .../datatable/DataTableResponsiveDemo.vue     |  4 ++--
 .../datatable/DataTableRowExpandDemo.vue      |  2 +-
 src/views/datatable/DataTableRowGroupDemo.vue |  2 +-
 src/views/datatable/DataTableScrollDemo.vue   |  2 +-
 .../datatable/DataTableSelectionDemo.vue      | 12 +++++-----
 src/views/datatable/DataTableStateDemo.vue    |  8 +++----
 src/views/datatable/DataTableStyleDemo.vue    |  4 ++--
 src/views/dataview/DataViewDemo.vue           |  4 ++--
 src/views/dialog/DialogDemo.vue               | 12 +++++-----
 src/views/editor/EditorDemo.vue               |  2 +-
 src/views/galleria/GalleriaAdvancedDemo.vue   |  2 +-
 src/views/galleria/GalleriaFullScreenDemo.vue |  8 +++----
 .../galleria/GalleriaProgrammaticDemo.vue     |  2 +-
 src/views/multiselect/MultiSelectDemo.vue     |  2 +-
 src/views/multiselect/MultiSelectDoc.vue      |  2 +-
 .../OrganizationChartDemo.vue                 |  4 ++--
 .../OrganizationChartDoc.vue                  |  2 +-
 src/views/overlaypanel/OverlayPanelDemo.vue   |  2 +-
 src/views/paginator/PaginatorDemo.vue         |  2 +-
 src/views/progressbar/ProgressBarDemo.vue     |  2 +-
 src/views/progressbar/ProgressBarDoc.vue      |  2 +-
 src/views/ripple/RippleDemo.vue               |  2 +-
 src/views/ripple/RippleDoc.vue                |  2 +-
 src/views/scrollpanel/ScrollPanelDemo.vue     |  2 +-
 src/views/scrollpanel/ScrollPanelDoc.vue      |  2 +-
 src/views/sidebar/SidebarDemo.vue             | 10 ++++----
 src/views/steps/ConfirmationDemo.vue          |  6 ++---
 src/views/steps/PaymentDemo.vue               |  8 +++----
 src/views/steps/PersonalDemo.vue              |  8 +++----
 src/views/steps/SeatDemo.vue                  |  8 +++----
 src/views/steps/StepsDemo.vue                 |  4 ++--
 src/views/support/Support.vue                 |  2 +-
 src/views/tabmenu/TabMenuDemo.vue             |  2 +-
 src/views/tabview/TabViewDemo.vue             |  8 +++----
 src/views/terminal/TerminalDemo.vue           |  4 ++--
 src/views/terminal/TerminalDoc.vue            |  6 ++---
 src/views/theming/Theming.vue                 |  2 +-
 src/views/toolbar/ToolbarDemo.vue             |  4 ++--
 src/views/tree/TreeSelectionDemo.vue          | 10 ++++----
 src/views/tree/TreeTemplatingDemo.vue         |  2 +-
 src/views/treetable/TreeTableDoc.vue          |  2 +-
 .../treetable/TreeTableResponsiveDemo.vue     |  4 ++--
 .../treetable/TreeTableSelectionDemo.vue      | 10 ++++----
 102 files changed, 230 insertions(+), 230 deletions(-)

diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index ecd1ec6d8..5ef4a27de 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -103,7 +103,7 @@ export default {
             }
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.restoreAppend();
         this.unbindOutsideClickListener();
     },
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 1790fd1f8..9c195ede8 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -330,7 +330,7 @@ export default {
             this.selectionEnd = null;
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.timePickerTimer) {
             clearTimeout(this.timePickerTimer);
         }
diff --git a/src/components/carousel/Carousel.vue b/src/components/carousel/Carousel.vue
index bf0943030..18f69382c 100755
--- a/src/components/carousel/Carousel.vue
+++ b/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();
 		}
diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
index dd60bd7dd..ce08e2b02 100755
--- a/src/components/chart/Chart.vue
+++ b/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;
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index 407a03a31..6477c8518 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/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();
diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue
index 14269b6aa..302cb991b 100755
--- a/src/components/contextmenu/ContextMenu.vue
+++ b/src/components/contextmenu/ContextMenu.vue
@@ -44,7 +44,7 @@ export default {
             visible: false
         };
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.restoreAppend();
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
diff --git a/src/components/contextmenu/ContextMenuSub.vue b/src/components/contextmenu/ContextMenuSub.vue
index 86841cd01..8630f02d5 100755
--- a/src/components/contextmenu/ContextMenuSub.vue
+++ b/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>
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 9f1f5402c..fa09e9bfe 100755
--- a/src/components/datatable/DataTable.vue
+++ b/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() {
diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index 243172e5d..d153ff7dd 100755
--- a/src/components/dataview/DataView.vue
+++ b/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="$scopedSlots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
+					<slot v-if="$slots.list && layout === 'list'" name="list" :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>
diff --git a/src/components/deferredcontent/DeferredContent.vue b/src/components/deferredcontent/DeferredContent.vue
index a83663517..fd79f7adc 100755
--- a/src/components/deferredcontent/DeferredContent.vue
+++ b/src/components/deferredcontent/DeferredContent.vue
@@ -19,7 +19,7 @@ export default {
                 this.bindScrollListener();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindScrollListener();
     },
     methods: {
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 90137904a..fe5b20e0b 100755
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -93,7 +93,7 @@ export default {
     mounted() {
         this.removeStylesFromMask();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.disableDocumentSettings();
     },
     methods: {
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 8f47e0daa..41d570638 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/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)
                 }
             ];
         },
diff --git a/src/components/editor/Editor.vue b/src/components/editor/Editor.vue
index 507dd1d5d..d71b92cb1 100755
--- a/src/components/editor/Editor.vue
+++ b/src/components/editor/Editor.vue
@@ -107,7 +107,7 @@ export default {
             }
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.quill = null;
     }
 }
diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
index d52af5fb8..61986462d 100755
--- a/src/components/fileupload/FileUpload.vue
+++ b/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>
diff --git a/src/components/fullcalendar/FullCalendar.vue b/src/components/fullcalendar/FullCalendar.vue
index dc81e085a..91fbb00a9 100755
--- a/src/components/fullcalendar/FullCalendar.vue
+++ b/src/components/fullcalendar/FullCalendar.vue
@@ -34,7 +34,7 @@ export default {
             this.initialize();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.calendar) {
             this.calendar.destroy();
             this.calendar = null;
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index 74b731e0e..91ee33023 100755
--- a/src/components/galleria/Galleria.vue
+++ b/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');
         }
diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
index 4694b3abf..5c81920d2 100755
--- a/src/components/galleria/GalleriaContent.vue
+++ b/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();
 		}
diff --git a/src/components/galleria/GalleriaThumbnails.vue b/src/components/galleria/GalleriaThumbnails.vue
index 843e05394..f5a9dd2e3 100755
--- a/src/components/galleria/GalleriaThumbnails.vue
+++ b/src/components/galleria/GalleriaThumbnails.vue
@@ -140,7 +140,7 @@ export default {
             this.d_oldNumVisible = this.d_numVisible;
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
 		if (this.responsiveOptions) {
 			this.unbindDocumentListeners();
         }
diff --git a/src/components/inlinemessage/InlineMessage.vue b/src/components/inlinemessage/InlineMessage.vue
index 96a1c7d41..05caf762e 100755
--- a/src/components/inlinemessage/InlineMessage.vue
+++ b/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', {
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index 3b66cf595..480de195d 100755
--- a/src/components/megamenu/MegaMenu.vue
+++ b/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: {
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index dc1084b01..9ffc27c98 100755
--- a/src/components/menu/Menu.vue
+++ b/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();
diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
index e37b3223e..69d278cd0 100755
--- a/src/components/menubar/Menubar.vue
+++ b/src/components/menubar/Menubar.vue
@@ -30,7 +30,7 @@ export default {
             mobileActive: false
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.mobileActive = false;
         this.unbindOutsideClickListener();
     },
diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue
index 71484397a..65ccf7d48 100755
--- a/src/components/menubar/MenubarSub.vue
+++ b/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: {
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 0f41d1939..052517f18 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/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)
                 }
             ];
         },
diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue
index 017701900..3d13551d7 100755
--- a/src/components/orderlist/OrderList.vue
+++ b/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">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]" v-ripple
+                <template v-for="(item, i) of value" :key="getItemKey(item, i)">
+                    <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>
diff --git a/src/components/organizationchart/OrganizationChart.vue b/src/components/organizationchart/OrganizationChart.vue
index b8b476929..f740eb181 100755
--- a/src/components/organizationchart/OrganizationChart.vue
+++ b/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>
diff --git a/src/components/organizationchart/OrganizationChartNode.vue b/src/components/organizationchart/OrganizationChartNode.vue
index 54f934a9b..b7d1fa003 100755
--- a/src/components/organizationchart/OrganizationChartNode.vue
+++ b/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">
-                        <td :key="child.key + '_left'" 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>
+                    <template v-for="(child,i) of node.children" :key="child.key">
+                        <td class="p-organizationchart-line-left" :class="{'p-organizationchart-line-top': !(i === 0)}">&nbsp;</td>
+                        <td class="p-organizationchart-line-right" :class="{'p-organizationchart-line-top': !(i === (node.children.length - 1))}">&nbsp;</td>
                     </template>
                 </template>
             </tr>
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 683a8ca0c..2111cd072 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/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) {
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index 99edb0e84..7126c801e 100755
--- a/src/components/paginator/Paginator.vue
+++ b/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>
diff --git a/src/components/panelmenu/PanelMenuSub.vue b/src/components/panelmenu/PanelMenuSub.vue
index 86eece038..fe80da4fd 100755
--- a/src/components/panelmenu/PanelMenuSub.vue
+++ b/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>
diff --git a/src/components/picklist/PickList.vue b/src/components/picklist/PickList.vue
index 2ac89a397..ad49183df 100755
--- a/src/components/picklist/PickList.vue
+++ b/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">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]" v-ripple
+                <template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
+                    <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">
-                    <li tabindex="0" :key="getItemKey(item, i)" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]" v-ripple
+                <template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
+                    <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>
diff --git a/src/components/scrollpanel/ScrollPanel.vue b/src/components/scrollpanel/ScrollPanel.vue
index e6bbf980c..005cebb3c 100644
--- a/src/components/scrollpanel/ScrollPanel.vue
+++ b/src/components/scrollpanel/ScrollPanel.vue
@@ -35,7 +35,7 @@ export default {
             this.initialize();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindDocumentResizeListener();
 
         if (this.frame) {
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index e927a43ab..a410dfc34 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -52,7 +52,7 @@ export default {
     },
     mask: null,
     maskClickListener: null,
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindMaskClickListener();
     },
     methods: {
diff --git a/src/components/slider/Slider.vue b/src/components/slider/Slider.vue
index d8171da61..805460791 100755
--- a/src/components/slider/Slider.vue
+++ b/src/components/slider/Slider.vue
@@ -53,7 +53,7 @@ export default {
     barHeight: null,
     dragListener: null,
     mouseupListener: null,
-    beforeDestroy() {
+    beforeUnmount() {
         this.unbindDragListeners();
     },
     methods: {
diff --git a/src/components/steps/Steps.vue b/src/components/steps/Steps.vue
index e5ed7e4a7..1f7088d3f 100755
--- a/src/components/steps/Steps.vue
+++ b/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>
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index 0795acfab..42454335f 100755
--- a/src/components/tabmenu/TabMenu.vue
+++ b/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>
diff --git a/src/components/tabpanel/TabPanel.vue b/src/components/tabpanel/TabPanel.vue
index 5ebbcc408..5a819cd61 100755
--- a/src/components/tabpanel/TabPanel.vue
+++ b/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);
     }
 }
diff --git a/src/components/terminal/Terminal.vue b/src/components/terminal/Terminal.vue
index 603e190bd..1e7cdc9fc 100755
--- a/src/components/terminal/Terminal.vue
+++ b/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: {
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index 15c46b77d..7788c93cd 100755
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/src/components/tieredmenu/TieredMenu.vue
@@ -41,7 +41,7 @@ export default {
             visible: false
         };
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.restoreAppend();
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
diff --git a/src/components/tieredmenu/TieredMenuSub.vue b/src/components/tieredmenu/TieredMenuSub.vue
index 236cfc0d4..96594181d 100755
--- a/src/components/tieredmenu/TieredMenuSub.vue
+++ b/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: {
diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
index 48d51ceb7..191590dbc 100755
--- a/src/components/tree/Tree.vue
+++ b/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>
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index f43ceeeee..dded90cfc 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/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">
-                            <th :key="col.columnKey||col.field||i" :class="getFilterColumnHeaderClass(col)" :style="col.filterHeaderStyle">
+                        <template v-for="(col,i) of columns" :key="col.columnKey||col.field||i">
+                            <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>
diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
index 4eaa4b988..4dc91dfd8 100755
--- a/src/components/utils/DomHandler.js
+++ b/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)
-            target.el.nativeElement.appendChild(element);
+        else if(target.el && target.elElement)
+            target.elElement.appendChild(element);
         else
             throw new Error('Cannot append ' + target + ' to ' + element);
     }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7fa4bb826..95b063a71 100755
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -233,7 +233,7 @@ export default {
                 this.dark = false;
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     computed: {
diff --git a/src/views/accordion/AccordionDemo.vue b/src/views/accordion/AccordionDemo.vue
index 281dea1d1..a2a207f50 100755
--- a/src/views/accordion/AccordionDemo.vue
+++ b/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>
diff --git a/src/views/card/CardDemo.vue b/src/views/card/CardDemo.vue
index a6369d1f4..725bf05e5 100755
--- a/src/views/card/CardDemo.vue
+++ b/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>
diff --git a/src/views/chart/BarChartDemo.vue b/src/views/chart/BarChartDemo.vue
index 9d0921754..100c01f51 100755
--- a/src/views/chart/BarChartDemo.vue
+++ b/src/views/chart/BarChartDemo.vue
@@ -50,7 +50,7 @@ export default {
             this.applyDarkTheme();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {
diff --git a/src/views/chart/ComboChartDemo.vue b/src/views/chart/ComboChartDemo.vue
index aefcc3354..10e172b48 100755
--- a/src/views/chart/ComboChartDemo.vue
+++ b/src/views/chart/ComboChartDemo.vue
@@ -34,7 +34,7 @@ export default {
             this.applyDarkTheme();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {
diff --git a/src/views/chart/DoughnutChartDemo.vue b/src/views/chart/DoughnutChartDemo.vue
index 764f8b24d..7e81f48f2 100755
--- a/src/views/chart/DoughnutChartDemo.vue
+++ b/src/views/chart/DoughnutChartDemo.vue
@@ -30,7 +30,7 @@ export default {
                 this.chartOptions = this.getLightTheme();
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {
diff --git a/src/views/chart/LineChartDemo.vue b/src/views/chart/LineChartDemo.vue
index 9fae1dffd..a409722f7 100755
--- a/src/views/chart/LineChartDemo.vue
+++ b/src/views/chart/LineChartDemo.vue
@@ -45,7 +45,7 @@ export default {
             this.applyDarkTheme();
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {
diff --git a/src/views/chart/PieChartDemo.vue b/src/views/chart/PieChartDemo.vue
index 7db03ff7a..30eaf4e4c 100755
--- a/src/views/chart/PieChartDemo.vue
+++ b/src/views/chart/PieChartDemo.vue
@@ -30,7 +30,7 @@ export default {
                 this.chartOptions = this.getLightTheme();
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {
diff --git a/src/views/chart/PolarAreaChartDemo.vue b/src/views/chart/PolarAreaChartDemo.vue
index dfc4aff29..a36c0e0cb 100755
--- a/src/views/chart/PolarAreaChartDemo.vue
+++ b/src/views/chart/PolarAreaChartDemo.vue
@@ -30,7 +30,7 @@ export default {
                 this.chartOptions = this.getLightTheme();
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {
diff --git a/src/views/chart/RadarChartDemo.vue b/src/views/chart/RadarChartDemo.vue
index 7c48586ba..874333601 100755
--- a/src/views/chart/RadarChartDemo.vue
+++ b/src/views/chart/RadarChartDemo.vue
@@ -30,7 +30,7 @@ export default {
                 this.chartOptions = this.getLightTheme();
         });
     },
-    beforeDestroy() {
+    beforeUnmount() {
         EventBus.off('change-theme');
     },
     data() {
diff --git a/src/views/datatable/DataTableContextMenuDemo.vue b/src/views/datatable/DataTableContextMenuDemo.vue
index 5f4b70311..c17ff3a16 100755
--- a/src/views/datatable/DataTableContextMenuDemo.vue
+++ b/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>
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index 2e243d9ca..5c5e82454 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/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>
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 620d4d718..20c909f63 100755
--- a/src/views/datatable/DataTableDemo.vue
+++ b/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 {
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index c24ae0ce9..5632c6cf9 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/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 {
diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index 196dc54eb..0d710f002 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/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;
 }
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 4d8bb765c..b71a66e7a 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/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 {
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue
index c79087685..6e8e6db8e 100755
--- a/src/views/datatable/DataTableResponsiveDemo.vue
+++ b/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 {
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index aa9c127a3..cb2ef8d25 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/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">
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index 2b67a24b4..cec559957 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/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>
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index ededf76b0..2f8a774e6 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/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>
diff --git a/src/views/datatable/DataTableSelectionDemo.vue b/src/views/datatable/DataTableSelectionDemo.vue
index ea1427f37..1338b21b4 100755
--- a/src/views/datatable/DataTableSelectionDemo.vue
+++ b/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>
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index d109ec235..bd1b29378 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/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"
-                    :selection.sync="selectedCustomer1" selectionMode="single" dataKey="id"
+                <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">
                     <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"
-                    :selection.sync="selectedCustomer2" selectionMode="single" dataKey="id"
+                <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">
                     <template #header>
                        <span class="p-input-icon-left">
diff --git a/src/views/datatable/DataTableStyleDemo.vue b/src/views/datatable/DataTableStyleDemo.vue
index 1ff2b6eed..bf6f498e0 100755
--- a/src/views/datatable/DataTableStyleDemo.vue
+++ b/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;
 
 }
diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index cd86c2a90..f918f7098 100755
--- a/src/views/dataview/DataViewDemo.vue
+++ b/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;
 
diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
index 326e95866..f70947e93 100755
--- a/src/views/dialog/DialogDemo.vue
+++ b/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>
diff --git a/src/views/editor/EditorDemo.vue b/src/views/editor/EditorDemo.vue
index 06b4b1a81..b867b2bfd 100755
--- a/src/views/editor/EditorDemo.vue
+++ b/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>
diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue
index 8f6dc6858..98eb17dbd 100644
--- a/src/views/galleria/GalleriaAdvancedDemo.vue
+++ b/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">
diff --git a/src/views/galleria/GalleriaFullScreenDemo.vue b/src/views/galleria/GalleriaFullScreenDemo.vue
index 30c316dab..2d414507d 100755
--- a/src/views/galleria/GalleriaFullScreenDemo.vue
+++ b/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"
-                    :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
+                <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">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
diff --git a/src/views/galleria/GalleriaProgrammaticDemo.vue b/src/views/galleria/GalleriaProgrammaticDemo.vue
index 7d10cd9a5..fe39e51a6 100644
--- a/src/views/galleria/GalleriaProgrammaticDemo.vue
+++ b/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>
diff --git a/src/views/multiselect/MultiSelectDemo.vue b/src/views/multiselect/MultiSelectDemo.vue
index 1e084969c..ad3aae1b4 100755
--- a/src/views/multiselect/MultiSelectDemo.vue
+++ b/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;
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index b32017c29..8da3437d9 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/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;
diff --git a/src/views/organizationchart/OrganizationChartDemo.vue b/src/views/organizationchart/OrganizationChartDemo.vue
index 333eeffc2..e26c1b588 100755
--- a/src/views/organizationchart/OrganizationChartDemo.vue
+++ b/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;
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index 01b13ec2b..a279cfe2e 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/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;
diff --git a/src/views/overlaypanel/OverlayPanelDemo.vue b/src/views/overlaypanel/OverlayPanelDemo.vue
index f910a4d45..f5f40faeb 100755
--- a/src/views/overlaypanel/OverlayPanelDemo.vue
+++ b/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">
diff --git a/src/views/paginator/PaginatorDemo.vue b/src/views/paginator/PaginatorDemo.vue
index c604aaa38..adb808baf 100755
--- a/src/views/paginator/PaginatorDemo.vue
+++ b/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()"/>
diff --git a/src/views/progressbar/ProgressBarDemo.vue b/src/views/progressbar/ProgressBarDemo.vue
index 85c573577..e71b68b94 100755
--- a/src/views/progressbar/ProgressBarDemo.vue
+++ b/src/views/progressbar/ProgressBarDemo.vue
@@ -53,7 +53,7 @@ export default {
     mounted() {
         this.startProgress();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.endProgress();
     },
     components: {
diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index 0f12cb3a8..375edcc5b 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -152,7 +152,7 @@ export default {
 	mounted() {
 		this.startProgress();
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		this.endProgress();
 	}
 }
diff --git a/src/views/ripple/RippleDemo.vue b/src/views/ripple/RippleDemo.vue
index a66b50c3e..8aa45617e 100644
--- a/src/views/ripple/RippleDemo.vue
+++ b/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;
diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index 9f9f40dbf..d41b12462 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/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;
diff --git a/src/views/scrollpanel/ScrollPanelDemo.vue b/src/views/scrollpanel/ScrollPanelDemo.vue
index 9f2f50072..9fc714d4b 100644
--- a/src/views/scrollpanel/ScrollPanelDemo.vue
+++ b/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;
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
index db34f93a2..5ea9bed98 100644
--- a/src/views/scrollpanel/ScrollPanelDoc.vue
+++ b/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;
diff --git a/src/views/sidebar/SidebarDemo.vue b/src/views/sidebar/SidebarDemo.vue
index 05d24ec83..b844f168e 100755
--- a/src/views/sidebar/SidebarDemo.vue
+++ b/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>
diff --git a/src/views/steps/ConfirmationDemo.vue b/src/views/steps/ConfirmationDemo.vue
index 4bfef356f..b05b8d764 100755
--- a/src/views/steps/ConfirmationDemo.vue
+++ b/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"/>
diff --git a/src/views/steps/PaymentDemo.vue b/src/views/steps/PaymentDemo.vue
index 1496c80b4..5dac90e0c 100755
--- a/src/views/steps/PaymentDemo.vue
+++ b/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" />
diff --git a/src/views/steps/PersonalDemo.vue b/src/views/steps/PersonalDemo.vue
index c05ccbc35..0c7ba1627 100755
--- a/src/views/steps/PersonalDemo.vue
+++ b/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" />
diff --git a/src/views/steps/SeatDemo.vue b/src/views/steps/SeatDemo.vue
index 9c154b5ec..3d7573d7e 100755
--- a/src/views/steps/SeatDemo.vue
+++ b/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" />
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
index fbe89a874..e02ac0902 100755
--- a/src/views/steps/StepsDemo.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/support/Support.vue b/src/views/support/Support.vue
index e2b3a0db2..60d4a911b 100755
--- a/src/views/support/Support.vue
+++ b/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;
 
diff --git a/src/views/tabmenu/TabMenuDemo.vue b/src/views/tabmenu/TabMenuDemo.vue
index c675af4bf..ad8370a02 100755
--- a/src/views/tabmenu/TabMenuDemo.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/tabview/TabViewDemo.vue b/src/views/tabview/TabViewDemo.vue
index c963b1fb4..e7acfb8cf 100755
--- a/src/views/tabview/TabViewDemo.vue
+++ b/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');
     },
diff --git a/src/views/terminal/TerminalDemo.vue b/src/views/terminal/TerminalDemo.vue
index c2c25327c..daf573a54 100755
--- a/src/views/terminal/TerminalDemo.vue
+++ b/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;
 
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index 0edf083f5..74abdfe21 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/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;
 
diff --git a/src/views/theming/Theming.vue b/src/views/theming/Theming.vue
index 33eba63e1..7bbc81aaa 100755
--- a/src/views/theming/Theming.vue
+++ b/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;
     }
diff --git a/src/views/toolbar/ToolbarDemo.vue b/src/views/toolbar/ToolbarDemo.vue
index e78e1e2d8..301464d00 100755
--- a/src/views/toolbar/ToolbarDemo.vue
+++ b/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" />
diff --git a/src/views/tree/TreeSelectionDemo.vue b/src/views/tree/TreeSelectionDemo.vue
index f8ae3bf45..196d2e4a4 100755
--- a/src/views/tree/TreeSelectionDemo.vue
+++ b/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>
diff --git a/src/views/tree/TreeTemplatingDemo.vue b/src/views/tree/TreeTemplatingDemo.vue
index 7c12e6df5..e680c237d 100755
--- a/src/views/tree/TreeTemplatingDemo.vue
+++ b/src/views/tree/TreeTemplatingDemo.vue
@@ -108,7 +108,7 @@ button {
     margin-right: .5rem;
 }
 
-/deep/ .p-tree {
+::v-deep .p-tree {
     a {
         color: #2196f3;
     }
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 36b75febe..2e32385c6 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -1239,7 +1239,7 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    /deep/ {
+    ::v-deep {
         .sm-invisible {
             display: none;
         }
diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue
index ad2b95dfa..0293c3fe1 100755
--- a/src/views/treetable/TreeTableResponsiveDemo.vue
+++ b/src/views/treetable/TreeTableResponsiveDemo.vue
@@ -73,7 +73,7 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    /deep/ {
+    ::v-deep {
         .sm-invisible {
             display: none;
         }
@@ -117,7 +117,7 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    /deep/ {
+    ::v-deep {
         .sm-invisible {
             display: none;
         }
diff --git a/src/views/treetable/TreeTableSelectionDemo.vue b/src/views/treetable/TreeTableSelectionDemo.vue
index f187f802b..9d2fd4b42 100755
--- a/src/views/treetable/TreeTableSelectionDemo.vue
+++ b/src/views/treetable/TreeTableSelectionDemo.vue
@@ -10,7 +10,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Single Selection</h5>
-                <TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1">
+                <TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -19,7 +19,7 @@
 
             <div class="card">
                 <h5>Multiple Selection with MetaKey</h5>
-                <TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1">
+                <TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -28,7 +28,7 @@
 
             <div class="card">
                 <h5>Multiple Selection without MetaKey</h5>
-                <TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false">
+                <TreeTable :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -37,7 +37,7 @@
 
             <div class="card">
                 <h5>Checkbox Selection</h5>
-                <TreeTable :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3">
+                <TreeTable :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -46,7 +46,7 @@
 
             <div class="card">
                 <h5>Events</h5>
-                <TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2"
+                <TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2"
                     @node-select="onNodeSelect" @node-unselect="onNodeUnselect">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>