diff --git a/examples/custom_vue_component/counter.py b/examples/custom_vue_component/counter.py
index c2a23bdd2..59799f335 100644
--- a/examples/custom_vue_component/counter.py
+++ b/examples/custom_vue_component/counter.py
@@ -3,7 +3,7 @@
 from nicegui.element import Element
 
 
-class Counter(Element, component='counter.js'):
+class Counter(Element, component='counter.vue'):    # you can also use component='counter.js'
 
     def __init__(self, title: str, *, on_change: Optional[Callable] = None) -> None:
         super().__init__()
diff --git a/examples/custom_vue_component/counter.vue b/examples/custom_vue_component/counter.vue
new file mode 100644
index 000000000..bde702322
--- /dev/null
+++ b/examples/custom_vue_component/counter.vue
@@ -0,0 +1,28 @@
+<template>
+    <button @click="handle_click">
+      <strong>{{title}}: {{value}}</strong>
+    </button>
+  </template>
+  
+  <script>
+    export default {
+      data() {
+        return {
+          value: 0
+        }
+      },
+      methods: {
+        handle_click() {
+          this.value += 1;
+          this.$emit("change", this.value);
+        },
+        reset() {
+          this.value = 0
+        },
+        dummy() {}
+      },
+      props: {
+        title: String
+      }
+    }
+  </script>
\ No newline at end of file
diff --git a/examples/custom_vue_component/main.py b/examples/custom_vue_component/main.py
index bd373eecf..7afdbfcb2 100755
--- a/examples/custom_vue_component/main.py
+++ b/examples/custom_vue_component/main.py
@@ -14,4 +14,4 @@
 
 ui.button('Reset', on_click=counter.reset).props('small outline')
 
-ui.run()
+ui.run(uvicorn_reload_includes="*.py,*.js,*.vue")