[SOLVED] Why am I able to see the x and y offset in the console but not on my webpage?

Why am I able to see the x and y offset in the console but not on my webpage?

I am trying to display the coordinates of my mouse inside a certain area that I have predetermined are using a div. I am able to see the coordinates dynamically changing as I move the mouse inside the div when look I look at the chrome console but not on my webpage.

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Mouse Coordinates</title>
        <link rel="stylesheet" type="text/css" href="style.css">        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>
        <div id="vue-app">
   <div id="canvas" v-on:mousemove="XYcoordinates">
                {{x}},{{y}}
            <div>
        </div>


        <script src="app.js"></script>
    </body>
</html>

//App.js file
// this is a Vue instance
new Vue({
    el:'#vue-app',
    // data object
    data:{
     x:0,
     y:0
    },
    methods:{
        XYcoordinates: function(event){
            console.log(event);
            this.x = event.offsetX;
            this.y = event.offsetY;
        }
    }
});

#canvas{
    width:600px;
    padding: 200px 20px;
    text-align: center;
    border: 3px solid rgb(228, 0, 0);
}

Solution

The problem comes back to the unclosed div tag, you can see the link https://jsfiddle.net/smaha/bajdmyhn/26/ it works

 <div id="vue-app">
   <div id="canvas" v-on:mousemove="XYcoordinates">
            {{x}},{{y}}
   </div>
 </div>