Element-ui set menu items as active

I'm using Element-ui's NavMenu and I want to set the default active for each page, the menu itself in in a shared layout component and the actual page is another component but they look like one page, this is to easily use the same page layout while only coding it in one place.

This is the menu

<el-menu v-if="role === 1"
        :default-active="activeIndex"
        :unique-opened="true"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#CA8AEC">

    <el-menu-item index="1"><a :href="'/'">Marcas</a></el-menu-item>
    <el-menu-item index="2"><a :href="'/products'">Productos</a></el-menu-item>
    <el-menu-item index="3"><a :href="'/users'">Usuarios</a></el-menu-item>
</el-menu>

<script>
 export default {
        name: 'layout',
        data() {
            return {
                activeIndex: '0',
            }
        },
    }
</script>

The other pages are like this

<template>
    <layout>
        <div>
            <p>Users</p>

        </div>
    </layout>
</template>
<script>
    import Layout from "../../Shared/Layout";

    export default {
        components: {
            Layout,

        },
        data() {
            return {
                activeIndex: '3',
            }
        },
        methods: {}
    }
</script>

But this doesn't work, what am I missing?