Please check this jsFiddle: https://jsfiddle.net/mani04/r4mbh6nu/

EDIT: updated with dynamic text: https://jsfiddle.net/mani04/r4mbh6nu/1/

In the above example, I am able to write into canvas, and also ensure that the input text goes into span as you would expect, all using Vue.js

Coming back to your example, the HTML is:

<div id="app">
    <canvas id="canvas" width="800" height="600"></canvas>
    <input type="text" v-model="exampleContent" />
    <span>{{ exampleContent }}</span>
</div>

Vue.js reads the elements inside #app and keeps it as the template for your Vue app. So your canvas, input and span elements will now be re-rendered by Vue.js when it constructs the DOM.

During this process, your original canvas text - the one you set before initiating the Vue application gets lost.

There is no clear way to solve this issue other than using a directive, as in my jsFiddle example. A Vue directive helps you capture the DOM element.

In my example, I define a Vue directive called insert-message which I use on canvas as v-insert-message. This allows me to capture the DOM element and then do the other steps: getContext and fillText. There is no id required, or no javascript code to getElementById.

One more thing - your canvas is just too large, and therefore you were not able to see your input and span elements. They were working normally in your example also!

EDIT: example for directive bindings

I just found a way to use directives and still write dynamic stuff into canvas.

Check the updated jsFiddle: https://jsfiddle.net/mani04/r4mbh6nu/1/

Try with v-show and with class instead id, so you can select all divs:

new Vue({
  el: "#app",
  data: {
    loadModal: false,
  },
  methods: {
    runModal(){
        this.loadModal = true;
      const c = document.querySelectorAll("canvas");
      c.forEach(can => {
        let ctx = can.getContext("2d");
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();
      })
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
li {
  margin: 8px 0;
}
h2 {
  font-weight: bold;
  margin-bottom: 15px;
}
del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="runModal()">
  Click Me
  </button>
  <br><br>
  <div v-show="loadModal == true">
    <canvas class="canvas" id="myCanvas" width="200" height="100" style="border:3px solid #d3d3d3; color:red;">
    </canvas>
  </div>
  <canvas class="canvas" id="myCanvas" width="200" height="100" style="border:3px solid #d3d3d3; color:red;">
  </canvas>
</div>