diff --git a/src/views/datatable/DataTableContextMenuDemo.vue b/src/views/datatable/DataTableContextMenuDemo.vue
index c3bcb18a2..2037e3bac 100755
--- a/src/views/datatable/DataTableContextMenuDemo.vue
+++ b/src/views/datatable/DataTableContextMenuDemo.vue
@@ -114,7 +114,7 @@ export default {
         <Toast />
         <div class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu">
+                <DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @rowContextmenu="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/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index 61ef82978..f9dbc95c1 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -72,7 +72,7 @@
                     </Column>
                     <Column field="inventoryStatus" header="Status">
                         <template #editor="slotProps">
-                            <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status">
+                            <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
                                 <template #option="slotProps">
                                     <span :class="'product-badge status-' + slotProps.option.value.toLowerCase()">{{slotProps.option.label}}</span>
                                 </template>
@@ -337,7 +337,7 @@ export default {
                     </Column>
                     <Column field="inventoryStatus" header="Status">
                         <template #editor="slotProps">
-                            <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status">
+                            <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
                                 <template #option="slotProps">
                                     <span :class="'product-badge status-' + slotProps.option.value.toLowerCase()">{{slotProps.option.label}}</span>
                                 </template>
@@ -358,7 +358,7 @@ export default {
             <div class="card">
                 <h5>Advanced Cell Editing</h5>
                 <p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
-                <DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" >
+                <DataTable :value="products2" editMode="cell" @cellEditComplete="onCellEditComplete" class="editable-cells-table" >
                     <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
                         <template #editor="slotProps">
                             <InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
@@ -370,7 +370,7 @@ export default {
             <div class="card">
                 <h5>Row Editing</h5>
                 <DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
-                    @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
+                    @rowEditInit="onRowEditInit" @rowEditCancel="onRowEditCancel">
                     <Column field="code" header="Code">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
diff --git a/src/views/datatable/DataTableReorderDemo.vue b/src/views/datatable/DataTableReorderDemo.vue
index 0a2b0bf18..3550659d5 100755
--- a/src/views/datatable/DataTableReorderDemo.vue
+++ b/src/views/datatable/DataTableReorderDemo.vue
@@ -90,7 +90,7 @@ export default {
         <Toast />
         <div class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
+                <DataTable :value="products" :reorderableColumns="true" @columnReorder="onColReorder" @rowReorder="onRowReorder">
                     <Column :rowReorder="true" headerStyle="width: 3rem" :reorderableColumn="false" />
                     <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
                 </DataTable>
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index 95c88ffa4..de562d2b1 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/src/views/datatable/DataTableRowExpandDemo.vue
@@ -200,7 +200,7 @@ export default {
         <div class="content-section implementation">
             <div class="card">
                 <DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
-                    @row-expand="onRowExpand" @row-collapse="onRowCollapse">
+                    @rowExpand="onRowExpand" @rowCollapse="onRowCollapse">
                     <template #header>
                         <div class="table-header-container">
                             <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index fd9462bca..663964b26 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -311,7 +311,7 @@ export default {
                 <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
                     sortMode="single" sortField="representative.name" :sortOrder="1"
                     :expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
-                    @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse">
+                    @rowgroupExpand="onRowGroupExpand" @rowgroupCollapse="onRowGroupCollapse">
                     <Column field="representative.name" header="Representative"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="country" header="Country">
diff --git a/src/views/datatable/DataTableSelectionDemo.vue b/src/views/datatable/DataTableSelectionDemo.vue
index e9faaa4aa..826e1501d 100755
--- a/src/views/datatable/DataTableSelectionDemo.vue
+++ b/src/views/datatable/DataTableSelectionDemo.vue
@@ -263,7 +263,7 @@ export default {
                 <h5>Events</h5>
                 <p>row-select and row-unselects are available as selection events.</p>
                 <DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id"
-                    @row-select="onRowSelect($event)" @row-unselect="onRowUnselect($event)">
+                    @rowSelect="onRowSelect($event)" @rowUnselect="onRowUnselect($event)">
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -342,7 +342,6 @@ export default {
     },
     methods: {
         onRowSelect(event) {
-            console.log(event)
             this.$toast.add({severity: 'info', summary: 'Product Selected', detail: 'Name: ' + event.data.name, life: 3000});
         },
         onRowUnselect(event) {
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index 181df91cb..12b874279 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -724,7 +724,7 @@ export default {
             <div class="card">
                 <h5>Advanced</h5>
                 <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">
+                    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
                     <template #person="slotProps">
                         <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
                         <div class="node-content">
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index a2a8abf48..fbc396ef5 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -236,7 +236,7 @@ export default {
                 <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" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
+                    <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @rowSelect="onProductSelect">
                         <Column field="name" header="Name" sortable></Column>
                         <Column header="Image">
                             <template #body="slotProps">
diff --git a/src/views/tree/TreeLazyDemo.vue b/src/views/tree/TreeLazyDemo.vue
index efec5fb8a..70f623c1e 100755
--- a/src/views/tree/TreeLazyDemo.vue
+++ b/src/views/tree/TreeLazyDemo.vue
@@ -114,7 +114,7 @@ export default {
     <div class="layout-content">
         <div class="content-section implementation">
             <div class="card">
-                <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"></Tree>
+                <Tree :value="nodes" @nodeExpand="onNodeExpand" :loading="loading"></Tree>
             </div>
         </div>
     </div>                    
diff --git a/src/views/tree/TreeSelectionDemo.vue b/src/views/tree/TreeSelectionDemo.vue
index 6d841a91f..ae6be1154 100755
--- a/src/views/tree/TreeSelectionDemo.vue
+++ b/src/views/tree/TreeSelectionDemo.vue
@@ -126,7 +126,7 @@ export default {
 
                 <h5>Events</h5>
                 <Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2" :metaKeySelection="false"
-                    @node-select="onNodeSelect" @node-unselect="onNodeUnselect"></Tree>
+                    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect"></Tree>
             </div>
         </div>
     </div>
diff --git a/src/views/treetable/TreeTableLazyDemo.vue b/src/views/treetable/TreeTableLazyDemo.vue
index 37cd03e08..8acd5c972 100755
--- a/src/views/treetable/TreeTableLazyDemo.vue
+++ b/src/views/treetable/TreeTableLazyDemo.vue
@@ -150,7 +150,7 @@ export default {
         <div class="content-section implementation">
             <div class="card">
                 <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
-                    @node-expand="onExpand" @page="onPage" :totalRecords="totalRecords">
+                    @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
diff --git a/src/views/treetable/TreeTableSelectionDemo.vue b/src/views/treetable/TreeTableSelectionDemo.vue
index 79a2961f9..01e84b588 100755
--- a/src/views/treetable/TreeTableSelectionDemo.vue
+++ b/src/views/treetable/TreeTableSelectionDemo.vue
@@ -198,7 +198,7 @@ export default {
             <div class="card">
                 <h5>Events</h5>
                 <TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2"
-                    @node-select="onNodeSelect" @node-unselect="onNodeUnselect">
+                    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect">
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>