Watch Data Change via Go and Vue.js

To watch and react to data changes is a must-have feature in modern front-end programming. Here we will show how to write Go code to watch data changes via Go/GopherJS/gopherjs-vue (Go binding for Vue.js).

See demo first:

New Value: {{ newvalue }}

Old Value: {{ oldvalue }}

The demo is simple. Just watch user input and print the new value and old value. The source code of demo in HTML and JavaScript/Vue.js is:


<div id="vueapp">
  <input v-model="userinput" placeholder="Input something">
  <p>New Value: {{ newvalue }}</p>
  <p>Old Value: {{ oldvalue }}</p>
<script src=""></script>


new Vue({
  el: '#vueapp',
  data: {
    userinput: "",
    newvalue: "",
    oldvalue: ""
  watch: {
    userinput: function(newVal, oldVal) {
      this.newvalue = newVal;
      this.oldvalue = oldVal;

Now we will translate the JavaScript/Vue.js part into Go. The HTML code is the same except you do not have to insert vue.js cdn in your HTML (vue.js code is already included in gopherjs-vue and will be automatically compiled and included in final code.) The following is Go equivalent code.

Go: go get and before compiling the Go code.

package main

import (

type Model struct {
      *js.Object        // this is needed for bidirectional data bindings
      UserInput  string `js:"userinput"`
      OldValue   string `js:"oldvalue"`
      NewValue   string `js:"newvalue"`

func main() {
      m := &Model{
              Object: js.Global.Get("Object").New(),
      // field assignment is required in this way to make data passing works
      m.UserInput = ""
      m.OldValue = ""
      m.NewValue = ""

      // create the VueJS viewModel using a struct pointer
      app := vue.New("#vueapp", m)

      // add watcher
      app.Call("$watch", "userinput", func(newVal, oldVal string) {
              m.OldValue = oldVal
              m.NewValue = newVal

The link of full source code is available on my GitHub repo.

Tested on:

  • Chromium 65.0.3325.181 on Ubuntu 17.10 (64-bit)
  • Go 1.10.2
  • GopherJS 1.10-3


[1]Online Sieve of Eratosthenes Demo via Go and Vue.js
[2]Computed vs Watched Property - Computed Properties and Watchers — Vue.js