vue.js mouse over and hide

<!DOCTYPE html>
<html>

  <head>
    <script data-require="vue.js@*" data-semver="10.0.26" src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
   <div id="app">
    <p @mouseover="mouseOver" v-show="!active"> {{message}}</p>
    <div v-show="active" @mouseleave="mouseOut">
     <input v-model="message" placeholder="edit me">
    </div>
     </div>
    <script>
      
      new Vue({
  el: "#app",
  data: {
    message: "Message can be shown here",
    active:false,
  },
    methods: {
        mouseOver: function(){
            this.active = true;   
          
        },
        mouseOut:function(){
          this.active=false;
        }
    }
});
      
    </script>
  </body>

</html>

 new Vue({
  el: "#app",
  data: {
    message: "Message can be shown here",
    active:false,
  },
    methods: {
        mouseOver: function(){
            this.active = true;   
          
        },
        mouseOut:function(){
          this.active=false;
        }
    }
});