link vue to crosstalk? about vuer HOT 2 OPEN

library(crosstalk)
library(plotly)
library(vueR)
library(htmltools)

mh <- mtcars %>% highlight_key(~cyl)
pl <- mh %>%
  plot_ly(
    x = ~wt, y = ~mpg, text = ~cyl, mode = "markers+text", 
    textposition = "top", hoverinfo = "x+y"
  ) %>%
  highlight(on = "plotly_hover", off = "plotly_doubleclick")

browsable(
  tagList(
    vueR::html_dependency_vue(minified = FALSE),
    tags$head(
      tags$link(href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css", rel="stylesheet"),
      tags$link( href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900", rel="stylesheet"),
      tags$link(href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css", rel="stylesheet"),
      tags$script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js")
    ),
    tag(
      "v-app",
      list(
        id = "app",
        tags$div(HTML("<v-select :items = 'cyl' @change = 'updateSelected' v-model= 'selected' multiple chips/>")),
        pl,
        tags$h3("Filter Handle"),
        "{{ filter.filteredKeys ? filter.filteredKeys : 'nothing filtered' }}",
        tags$h3("Selection Handle"),
        "{{ selection.value ? selection.value : 'nothing selected' }}"
      )
    ),
    tags$script(HTML(
sprintf(
"
  const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
      return {
        filter: new crosstalk.FilterHandle('%1$s'),
        selection: new crosstalk.SelectionHandle('%1$s'),
        cyl: %2$s.map(d => d.toString()) // crosstalk keys are strings
      }
    },
    computed: {
      selected: function() {return this.selection.value}
    },
    methods: {
      updateSelected: function(val) {
        this.selection.set(Array.isArray(val) ? val : [val])
      }
    }
  })
",
mh$groupName(),
jsonlite::toJSON(sort(unique(mh$data()$cyl)),auto_unbox=TRUE)
)
    ))
  )
)