html – Ayuda para traducir código de Jquery a Vue.js


soy nuevo en vue.js y necesito su ayuda para traducir este código de jquery a vue.js, lo que realiza este script es que muestra de manera aleatoria un emoji del array adjuntando una clase de css, luego de cierto intervalo lo oculta y muestra otro emoji aleatorio.

Variables Jquery

var LOADER_CONTAINER = $("#loader");
var LOADER_INTERVAL = 1600;
var LOADERS = (
  ("🌶","Dicing peppers"),
  ("🔪","Sharpening knives"),
  ("👩🏽‍🍳","Starching aprons"),
  ("🥒","Sautéing veggies"),
  ("🍳","Frying eggs"),
  ("🧀","Cutting cheese"),
  ("🥓","Crisping bacon"),
  ("🌽","Shucking corn"),
  ("🍚","Steaming rice")
)

Funcion para mostrar de manera aleatoria los emojis que están en el array de la variable LOADERS

$(document).ready(function() {
      var cycleLoader = function() {
        var index = Math.floor(Math.random() * LOADERS.length);
        var selected = LOADERS(index);
        var selectedEmoji = selected(0);
        var selectedText = selected(1);
        
        
        setTimeout(function(){
          LOADER_CONTAINER.children().addClass("animateOut");
        }, LOADER_INTERVAL - 300); //este valor es igual que la animación en css
        
        //Remueve y anima los divs mostrados anteriormente
        LOADER_CONTAINER.children(".emoji").last().remove();
        LOADER_CONTAINER.children(".text").last().remove();
        
        //anima el nuevo elemento entrante
        LOADER_CONTAINER.append('<div class="emoji">' + selectedEmoji + '</div>');
        LOADER_CONTAINER.append('<div class="text">' + selectedText + '</div>');
      }
      
      setInterval(cycleLoader, LOADER_INTERVAL);  
      cycleLoader(); // Se ejecuta la primera vez
      
    });

HTML:

<div id="loader">
</div>

Intento en Vue.js, solo deseo mostrar los emojis y ya no el texto, pero no se como lograr el mismo comportamiento que en Jquery:

<template>
        <div id="loader">
            <div v-for="emojis in loader" v-bind:key="emojis" class="emoji">
                {{emojis}}
            </div>
            <div class="text">Cargando...</div>
        </div>
    </template>

VUE.JS con error:

export default {
        data: function () {
            return {
                interval: 1600,
                loader: ("🥒","🧀","🌽","🍚","🥐")
            }
        },
        methods: {
            randomIndex: function () {
                Math.floor(Math.random() * this.loader.length);

                setTimeout(function(){
                    $("#loader").children().addClass("animateOut");
                }, this.interval - 300);

                $("#loader").children(".emoji").last().remove();
                $("#loader").last().remove();
            }
        }
    }