Hey again Ronny,
first of all it would be very helpfull if you use code-fences to make your code readable. I also think, that it wouldn’t help you if anybody here present you a ready-2-go soloution, so I´ll try it with some general tips, that helped me…
-
Read Part 1 and Part 2 of this writeup again and try to understand the general mechanic of slots and components.
-
Have a look in the f7-vue-documentation to see what components the framework offers (even if not all of them interacting with OH currently). The global f7-docs could also be helpfull (for things like css classes etc.)
-
Start small. Instead of modifying already existing (complex) code examples, try to set yourself small goals as a starting point (maybe bringing 4 customs buttons in one row) and work up from there.
To at least briefly address your current problem (as far as it´s possible in that code mess 
). It seems you are wrapping all the columns (in which the 1 - 4 buttons are) inside the row from my button-example.
The f7-row in the example acts just as a horizontal wrapper for the contents of the “fake-button” so it replaces a button in the keypad example, not a whole row. The component order here should be then:
f7-row
f7-col
f7-row (#1)
oh-button
...
f7-row (#2)
oh-button
...
...