When working with Vue, all your logic should usually be implemented inside components, either their methods, computed properties or similiar. The value returned from Vue.createApp is mostly an internal Vue object with some public API like mount() or directive(), it is not directly an instance of your application, from which you can access data or methods defined earlier.

Instead, in order to run some code, like creating new messages, on launch, you can add a lifecycle callback mounted(), from which you can actually access all the data and methods you have defined:

        const app = Vue.createApp({
            data() {
                return {
                    messages: []
                };
            },
            methods: {
                addMessage(message) {
                    this.messages.push(message);
                }
            },
            template: `
                <div class="list-group">
                    <div v-for="(message, index) in messages" :key="index" class="list-group-item">
                        <div class="d-flex">
                            <div class="p-2">
                                <i class="fa-solid fa-user fa-2xl text-primary"></i>
                                {{ message.role === 'user' ? '<i class="fa-solid fa-user fa-2xl text-primary"></i>' : '<i class="fa fa-robot fa-2xl text-primary"></i>' }}
                            </div>
                            <div class="p-2 flex-grow-1">{{ message.text }} <button type="button" class="copy-button">Copy</button></div>
                        </div>
                    </div>
                </div>  
            `,
            mounted() {
             for (let i = 0; i < 10; i++) {
              this.addMessage({ //instead of app, you should use this in order to reference component methods, data or properties
                role: 'user',
                text: 'message #' + i
               });
              }
            }
        });

        app.mount('#app');

I recommend reading Vue's amazing documentation a bit more to get a grasp on these things, for example the lifecycle hooks.

Regarding your second request:

Additionally, I want to add buttons to my template. After the HTML is rendered and added to the DOM, I would like to attach event listeners to these buttons. For example, for any button with the class copy-button, I want to add an event listener so that when the user clicks any button with that class, it logs "Hello" to the console.

You would need to adjust your html template inside .list-group-item div a bit for that:

<button @click="handleClick(message)">Click me</button>

And add a method handleClick respectively:

methods: {
  addMessage(message) {
    this.messages.push(message);
  },
  handleClick(message) {
   alert(message.text);
  }
}

But again, this is described nicely in the documentation and I recommend going through it again to better understand Vue's philosophy.