Refactor HelloVue component for better reusability.

Added a `data` object to centralize attribute bindings and replaced hardcoded class bindings with dynamic bindings using `v-bind`. Introduced a `buttonDisabled` property to manage button state dynamically. These changes improve maintainability and flexibility of the component.

Author: khannedy

src/components/HelloVue.vue

@@ -2,12 +2,21 @@
 console.info("Hello Vue");
 
 const hello = "<h1>Hello Vue</h1>"
+
+const data = {
+  class: "hello",
+  id: "hello"
+};
+
+const buttonDisabled = false;
 </script>
 
 <template>
-  <h1 class="hello">{{hello}}</h1>
+  <h1 v-bind="data">{{hello}}</h1>
+
+  <div :class="data.class" v-html="hello"></div>
 
-  <div v-html="hello"></div>
+  <button :disabled="buttonDisabled">This is Button</button>
 </template>
 
 <style scoped>