vuejs class binding on dynamically loaded elements

I try to use vuejs on some elements. This is how I load the script in my jinja2 template:

{% block tail %}
  {{ super() }}
   <script src="/static/assets/js/vue.global.js"></script>
<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'form-control shadow'
      }
    },
    delimiters: ['[[',']]']
  }).mount('#questions')
</script>
{% endblock %}

By clicking a button an html fragment as following is appended to a page element using jQuery.

<ul :class="message" class="" id="yesno">...</ul>

But the message isn’t bound to the element. However if I use this solution:

<ul  class="[[ message ]]"  id="yesno">...</ul>

The variable is set and it works. What could be the problem? Also, is my second solution an alternative for the first one?