Upgrade UI to Vue3

[rmotitsuki]

Related to Upgrade to Vue3

Summary

This PR updates the UI to the Vue3 compatibility framework. It requires the latest UI to work.

[italovalcy]

I faced the same issue reported by Aldo and I was able to overcome that problem by using the following change on top of Rogerio's changes:

diff --git a/ui/k-info-panel/best_path.kytos b/ui/k-info-panel/best_path.kytos
index a2b913f..ef82e6c 100644
--- a/ui/k-info-panel/best_path.kytos
+++ b/ui/k-info-panel/best_path.kytos
@@ -1,17 +1,17 @@
 <template>
     <k-accordion>
       <k-accordion-item title="Best Paths">
-            <k-property-panel v-for="(path, index) in content">
+        <template v-if="content">
+            <k-property-panel v-for="(path, index) in content.paths">
               <k-accordion-item :title=format_title(index,path['cost'])>
-                <template v-if="content">
                   <k-property-panel-item v-for="(current_path, path_index) in path['hops']"
                                         :name="String(path_index)" :value="format_hop(current_path)"
                                         :key="path_index">
                   </k-property-panel-item>
-                </template>
               </k-accordion-item>
             </k-property-panel>
-        </k-accordion-item>
+        </template>
+      </k-accordion-item>
     </k-accordion>
 </template>

@@ -39,7 +39,7 @@
       }
      },
      get_switch_data(base_path) {
-      return self.switches.filter(object => object.id === base_path)[0]
+      return this.content.switches[base_path]
      },
    },
    data () {
diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index d9d9a78..9feacbf 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -136,7 +136,7 @@
            </div>

         </k-accordion-item>
-      <k-accordion>
+      </k-accordion>
     </div>
   </k-toolbar-item>
 </template>
@@ -228,7 +228,7 @@ module.exports = {
     show() {
        var content = {
                       "component": 'kytos-pathfinder-k-info-panel-best_path',
-                      "content": this.paths,
+                      "content": {'paths': this.paths, 'switches': this.switches},
                       "icon": "compass",
                       "title": "Best Paths",
                       "subtitle": "by kytos/pathfinder"