I have a template that loops using v-for. In the template I have a named slot with the name being dynamically assigned in the loop. No content is appearing, what am I doing wrong?

<todo-tabs :list=items>

    <div slot=interview>Interview</div>

    <div slot=membership>Membership</div>

    <div slot=profile>Profile</div>

    <div slot=handoff>Handoff</div>

</todo-tabs>



<template id=todo-tabs>

            <div class=tab-content >      

                <div v-for=item in list :class={'active': item.current} class=tab-pane id=@{{ item.id }}>

                    <div class=skin skin-square>

                    <form class=form-horizontal role=form>

                    <div class=form-body>

                        <slot name=@{{ item.id }}></slot>

                    </div>

                    <div class=form-actions>

                        <button type=submit class=btn red btn-outline>Submit</button>

                        <button type=button class=btn default>Cancel</button>

                    </div>

                    </form>

                    </div>

                </div>

            </div>

        </template>



<script>

Vue.component('todo-tabs', {

        template: '#todo-tabs',

        props: ['list']

 });

 var vm = new Vue({

el: #todo,

data: {

items : [

            {id: 'interview', name: 'interview', complete: true, body: 'something1', step_content: 'SOME'  },

            {id: 'membership', name: 'membership', complete: false, body: 'something2', step_content: 'SOME' },

            {id: 'profile', name: 'profile', complete: false, body: 'something3', step_content: 'SOME', current: true  },

            {id: 'handoff', name: 'handoff', complete: false, body: 'something4', step_content: 'SOME'}

        ]

    }

});

</script>