Lo que entiendo esta sucediendo es que tu componente vex-navigation-item
esta conteniendo el menu que te muestra por esta razón al darle justify-center
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-blue-500 flex justify-between align-center">
<div class="p-10 bg-blue-200">A</div>
<div class="p-10 bg-blue-200">B</div>
<div class="p-10 bg-blue-200">C</div>
</div>
ahora bien lo que hay que entender es que esta funcionando correctamente todo, sin embargo tu menú no esta funcionando de acuerdo a lo que buscas.
Tomando en cuenta el ejemplo anterior en la opción B
vamos a agreegar todo tu menú:
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-blue-500 flex justify-between">
<div class="p-1 bg-blue-200">Item x</div>
<div class="p-10 bg-red-200 flex justify-center">
<div class="text-green-500">Item 1</div>
<div class="">Item 2</div>
<div class="text-green-500">Item 3</div>
<div class="">Item 4</div>
</div>
<div class="p-1 bg-blue-200">Item z</div>
</div>
en tu caso es como si item x
no existiera. debes verificar como esta generando el html para que agreges las correspondientes clases.
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-blue-500 flex justify-between">
<div class="p-10 bg-red-200 flex justify-center">
<div class="text-green-500">Item 1</div>
<div class="">Item 2</div>
<div class="text-green-500">Item 3</div>
<div class="">Item 4</div>
</div>
<div class="p-1 bg-blue-200">Item z</div>
</div>
Por esta razon tu menú es empujado a la izquierda.
Espero te sirva. Saludos.
style="width: 100% !important"