<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="editor">
  <textarea :value="input" @input="update"></textarea>
  <div v-html="output"></div>
</div>

<script>
  const { ref, computed } = Vue

  Vue.createApp({
    setup() {
      const input = ref('# hello')
      const output = computed(() => 
        marked.marked(input.value, { sanitize: true })
      )
      const update = _.debounce(e => {
        input.value = e.target.value
      }, 50)

      return {
        input,
        output,
        update
      }
    }
  }).mount('#editor')
</script>

// From packages/reactivity/src/ref.ts
const { ref, computed } = Vue

const input = ref('# hello')
const output = computed(() => processInput(input.value))

// From packages/vue/examples/composition/commits
const { createApp, ref, watchEffect } = Vue

createApp({
  setup() {
    const currentBranch = ref('main')
    const commits = ref(null)

    watchEffect(() => {
      fetch(`${API_URL}${currentBranch.value}`)
        .then(res => res.json())
        .then(data => {
          commits.value = data
        })
    })

    return {
      currentBranch,
      commits
    }
  }
}).mount('#demo')