Vue Js Download JSON Data on Click

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
<body>
  <div id="app">
     <h3>Vue Js Download Json Data on click</h3>
    <button @click="downloadFile">Download</button>
  </div>

const jsonData = JSON.stringify(data);
          const blob = new Blob([jsonData], { type: 'application/json' });
          const url = URL.createObjectURL(blob);

const link = document.createElement('a');
          link.href = url;
          link.download = 'data.json';

link.click();

URL.revokeObjectURL(url);
        }
      }
    });
  </script>
  <style scoped>
    #app {
      text-align: center;
      margin-top: 20px;
    }

button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

button:hover {
      background-color: #45a049;
    }

button:active {
      background-color: #3e8e41;
    }
  </style>

</body>

</html>