[Vuejs]-Why is my function not working when called from a vue.js component-generated element?

It works when this is done:

<toggle @tog="toggleCheckboxes"></toggle>

and in the Vue.js Part

<button type="button" @click="$emit('tog')">Select All (component)</button>

You need to understand that you are inside a component, in your case the toggle component.

So, your html is inside, and inside toggle you have nothing, no function define.
Like you said, you need to say to the parent "hey, my button is clicked", the way to do this is to use the $emit.

On the button click you can add

<button type="button" @click="$emit('selectAll')">Select All (component)</button>

Now, the child say to the parent "selectAll", you need to execute the function you want in the parent component:

<toggle @selectAll="toggleCheckboxes"></toggle>