How do you handle conflict between Alpinejs and Vuejs in a laravel project

Question

Vuejs and Alpine js uses similar directive @

So i resorted to usin x-bind: x-on:click instead of using the @ directive when writing AlpineJs in the same project as VueJs.

This has been working fine until There's a need to do a loop. Going through alpineJs docs

There are two rules worth noting about x-for: x-for MUST be declared on a element That element MUST have only one root element

So when i do

<template x-for"(option, index) in options) x-bind:key="index">
//the rest of the code
</template>

I keep getting Alpine expression error: option is not define.

Any idea on how to resolve this?