Make Buefy grids use proper Vue.js component structure

at least, better than before...this lets each page have the final say about the
app logic etc.

tailbone/templates/master/index.mako

@@ -15,7 +15,7 @@
 <%def name="extra_javascript()">
   ${parent.extra_javascript()}
   % if use_buefy:
-      ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.gridfilters.js') + '?ver={}'.format(tailbone.__version__))}
+      ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.grid.js') + '?ver={}'.format(tailbone.__version__))}
   % endif
   <script type="text/javascript">
     $(function() {
@@ -200,10 +200,30 @@
 
 </%def>
 
+<%def name="modify_tailbone_grid()">
+  ## NOTE: if you override this, must use <script> tags
+</%def>
+
+<%def name="make_tailbone_grid_app()">
+  ${self.modify_tailbone_grid()}
+  <script type="text/javascript">
+
+    TailboneGrid.data = function() { return TailboneGridData }
+
+    Vue.component('tailbone-grid', TailboneGrid)
+
+    new Vue({
+        el: '#tailbone-grid-app'
+    });
+
+  </script>
+</%def>
+
 
 % if use_buefy:
     ## TODO: stop using |n filter
     ${grid.render_buefy(tools=capture(self.grid_tools).strip(), context_menu=capture(self.context_menu_items).strip())|n}
+    ${self.make_tailbone_grid_app()}
 
 % else:
     ## no buefy, so do the traditional thing