Can't find data variable when using vue.NewOption to create component

[beatscode]

I'm not able to use CurrentRoute property in the view. I get ReferenceError: Can't find variable: currentRoute in the console onload. When running vue.NewComponent... I can gain access to the data property in the view. But I need to implement a render method for the component so I needed to use the NewOption api.

Is there something I'm doing wrong?

package main

import (
    "github.com/gopherjs/gopherjs/js"
    "github.com/oskca/gopherjs-vue"
)

type MainComponent struct {
    *js.Object
    CurrentRoute string `js:"currentRoute"`
}

func (c *MainComponent) ViewComponent() {
    println("Hello From ViewComponent")
}

func (c *MainComponent) ChangeRoute() {
    println("Just Changed Route")
}

type VLink struct {
    *js.Object
    Href     string `js:"href"`
    Required string `js:"required"`
}

func (v *VLink) Got(event *js.Object) {
    href := event.Get("target").Get("href")
    println("Going to", href, v)
    event.Call("preventDefault")
    vm := vue.GetVM(v)
    //Console error
    //Error: GetVM: Vue not registerd yet
    println("VM", vm)
}
func InitMainComponent() {
    m := &MainComponent{
        Object: js.Global.Get("Object").New(),
    }
    m.CurrentRoute = "/"
    o := vue.NewOption()
    o.SetDataWithMethods(m)
    //o.AddProp("currentRoute")
    //o.Set("currentRoute", "/")
    // o.SetRender(func(vm *vue.ViewModel, fn vue.CreateElement) {

    // })
    o.Template = MainTemplate
    o.NewComponent().Register("main-layout")
}
func InitVlinkComponent() {
    v := &VLink{
        Object: js.Global.Get("Object").New(),
    }
    o := vue.NewOption()
    o.SetDataWithMethods(v)
    o.AddMethod("Go", func(vm *vue.ViewModel, args []*js.Object) {
        event := args[0]
        href := event.Get("target").Get("href")
        event.Call("preventDefault")
        println("Going", href)
        vm.Emit("changeRoute")
    })
    o.AddComputed("isActive", func(vm *vue.ViewModel) interface{} {
        i := vm.Data.Get("isActive").Bool()
        return i
    })

    o.AddProp("href")
    o.Template = VLinkTemplate
    o.NewComponent().Register("v-link")
}

type controller struct {
    *js.Object
}

func main() {
    InitVlinkComponent()
    InitMainComponent()
    //vue.NewComponent(Mainlayout, MainTemplate).Register("main-layout")

    vm := vue.New("#app", new(controller))

    js.Global.Set("vm", vm)
    println("vm:", vm)
}

const (
    MainTemplate = `
   <div class="container">
    Current Route is: <input type=text v-model="currentRoute" />
    <ul>
      <li>
        <v-link href="/" v-on:changeRoute="ChangeRoute">Home</v-link>
        </li>
        <li>
        <v-link href="/about" v-on:changeRoute="ChangeRoute">About</v-link>
      </li>
    </ul>

    <slot></slot>
  </div>
`

    VLinkTemplate = `
      <a 
    v-bind:href="href"
    v-bind:class="{ active: isActive }"
    v-on:click="Go"
  >
    <slot></slot>
  </a>
    `
)

[beatscode]

Still trying to understand but components seemed to render when I set the option.Data as a function. Seems like o.SetDataWithMethods and o.Data were clashing overwrote the data object.

func InitMainComponent() {
    m := &MainComponent{
        Object: js.Global.Get("Object").New(),
    }
    o := vue.NewOption()
    o.SetDataWithMethods(m)
    o.Data = func() interface{} {
        data := make(map[string]interface{})
        data["currentRoute"] = "/"
        return data
    }
    fmt.Println("Data", o.Data)

    o.AddMethod("ChangeRoute", func(vm *vue.ViewModel, args []*js.Object) {
        currentRoute := args[0]
        vm.Data.Set("currentRoute", currentRoute)
    })
    fmt.Println("Data", o.Data)
    // o.SetRender(func(vm *vue.ViewModel, fn vue.CreateElement) {

    // })
    o.Template = MainTemplate
    o.NewComponent().Register("main-layout")
}