Adding new third party example

Author: David-Desmaisons

example/not-migrated-components/third-party.vue renamed to example/components/third-party.vue

@@ -4,7 +4,7 @@
       <h3>
         Integration with
         <a
-          href="https://element.eleme.io/#/en-US/component/collapse#collapse"
+          href="https://element-plus.org/#/en-US/component/collapse"
           target="_blank"
           >Element collapse</a
         >
@@ -80,17 +80,21 @@ export default {
       activeNames: [1],
       collapseComponentData: {
         on: {
-          input: this.inputChanged
+          "update:modelValue": this.inputChanged,
+          change: this.onChanged
         },
         props: {
-          value: this.activeNames
+          modelValue: this.activeNames
         }
       }
     };
   },
   methods: {
     inputChanged(val) {
       this.activeNames = val;
+    },
+    onChanged(evt) {
+      window.console.log({ evt });
     }
   }
 };

example/main.js

@@ -5,8 +5,10 @@ import { createRouter, createWebHistory } from "vue-router";
 import routes from "./route";
 import rawDisplayer from "./components/infra/raw-displayer";
 import store from "./store";
+import ElementPlus from "element-plus";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "font-awesome/css/font-awesome.css";
+import "element-plus/lib/theme-chalk/index.css";
 
 require("bootstrap");
 
@@ -18,5 +20,6 @@ const router = createRouter({
 const app = createApp(App);
 app.use(store);
 app.use(router);
+app.use(ElementPlus);
 app.component("rawDisplayer", rawDisplayer);
 router.isReady().then(() => app.mount("#app"));