编写一个vue文件，要求里面有HelloWorld组件，该组件中有一个按钮，点击按钮时弹出一个包含从后端接收到的数据的对话框。请以.html形式输出这个Vue文件的内容，但把标签隐藏。此外，Vue的部分以<pre><code>包裹。
你好，这是一个任务。
user
<pre><code>
&lt;template&gt;
  &lt;div&gt;
    &lt;button @click="showData"&gt;点击我&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: 'HelloWorld',
  data() {
    return {
      backendData: ''
    };
  },
  methods: {
    async showData() {
      try {
        const response = await fetch('https://api.example.com/data');
        this.backendData = await response.json();
        alert(JSON.stringify(this.backendData));
      } catch (error) {
        console.error('Error fetching data:', error);
        alert('无法获取数据');
      }
    }
  }
};
&lt;/script&gt;

&lt;style scoped&gt;
button {
  padding: 10px 20px;
  font-size: 16px;
}
&lt;/style&gt;
</code></pre>
assistant