Vue Js Pick Color From Image

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <h3>Vue Js Pick Color From Image</h3>
    <img src='https://www.sarkarinaukriexams.com/images/post/1684086628avenue-gf630b89d1_640.jpg'>
    <button @click="pickColor">Open Eye Dropper</button>
    <p>{{value}}</p>

</div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          value: ''
        }
      },
      methods: {
        async pickColor() {
          const eyeDropper = new EyeDropper()
          this.value = await eyeDropper.open()

}
      }
    })
  </script>
  <style>
    #app {
      text-align: center;
      margin: auto;
      max-width: 600px;
    }

img {
      max-width: 100%;
      height: auto;
    }

button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 20px;
    }

button:hover {
      background-color: #3e8e41;
    }

p {
      font-size: 18px;
      margin-top: 20px;
    }
  </style>

</body>

</html>