Refactor "view profile" page per latest Buefy theme conventions

tailbone/templates/people/view_profile_buefy.mako

@@ -1,7 +1,19 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/master/view.mako" />
 
-<div id="profile-info-app">
+<%def name="page_content()">
+  <profile-info></profile-info>
+</%def>
+
+<%def name="render_this_page()">
+  ${self.page_content()}
+</%def>
+
+<%def name="render_this_page_template()">
+  ${parent.render_this_page_template()}
+
+  <script type="text/x-template" id="profile-info-template">
+    <div>
       <b-tabs v-model="activeTab" type="is-boxed">
 
         <b-tab-item label="Personal" icon="check" icon-pack="fas">
@@ -398,16 +410,26 @@
 
       </b-tabs>
     </div>
+  </script>
+</%def>
 
+<%def name="make_this_page_component()">
+  ${parent.make_this_page_component()}
   <script type="text/javascript">
 
-  new Vue({
-      el: '#profile-info-app',
+    const ProfileInfo = {
+        template: '#profile-info-template',
         data() {
             return {
-              activeTab: 0
+                activeTab: 0,
             }
+        },
     }
-  })
+
+    Vue.component('profile-info', ProfileInfo)
 
   </script>
+</%def>
+
+
+${parent.body()}