Replaced first example in Introduction

src/.vuepress/components/FirstExample.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="demo">
+    <p>Counter: {{ counter }}</p>
+    <button @click="clearInterval">Stop timer</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      counter: 0,
+      interval: null
+    }
+  },
+  methods: {
+    clearInterval() {
+      clearInterval(this.interval)
+    }
+  },
+  mounted() {
+    this.interval = setInterval(() => {
+      this.counter++
+    }, 1000)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo {
+  font-family: sans-serif;
+  border: 1px solid #eee;
+  border-radius: 2px;
+  padding: 20px 30px;
+  margin-top: 1em;
+  margin-bottom: 40px;
+  user-select: none;
+  overflow-x: auto;
+}
+</style>

src/guide/introduction.md

@@ -29,31 +29,41 @@ The [Installation](installation.md) page provides more options of installing Vue
 At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:
 
 ```html
-<div id="hello-vue">
-  {{ message }}
+<div id="counter">
+  Counter: {{ counter }}
 </div>
 ```
 
 ```js
-const HelloVueApp = {
+const CounterApp = {
   data() {
     return {
-      message: 'Hello Vue!'
+      counter: 0
     }
   }
 }
 
-Vue.createApp(HelloVueApp).mount('#hello-vue')
+Vue.createApp(CounterApp).mount('#counter')
 ```
 
-We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Change the `message` property in the code snippet below to a different value and the rendered example will update accordingly:
+We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Take a look at the example below where `counter` property increments every second and you will see how rendered DOM changes:
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="KKpRVpx" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Hello Vue">
-  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/KKpRVpx">
-  Hello Vue</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+```js{8-10}
+const CounterApp = {
+  data() {
+    return {
+      counter: 0
+    }
+  },
+  mounted() {
+    setInterval(() => {
+      this.counter++
+    }, 1000)
+  }
+}
+```
+
+<FirstExample />
 
 In addition to text interpolation, we can also bind element attributes like this: