How to get {[space][caret][space]} and {{[space][caret][space]}}

I have a Vue project in PHPStorm and every time I want to import or use curly braces in Vue componenent, I’m having to add extra spaces inside my curly braces.

When I type import {, the closing curly brace is added in, so I end up with this:

enter image description here

If I press space once, I have of course:

enter image description here

What I would like, as soon as I press the space, that
the IDE automatically inserts another space and moves caret one position to left, so end up with {[space][caret][space]}. And similarly, {{[space][caret][space]}} for double curly braces (used in Vue components).

I’ve tried with Live Templates (as mentioned here) but it doesn’t seem to trigger after typing { … (I’ve tried selecting ‘None’ and ‘Tab’ as expand but doesn’t work).

It seems that a space is not allowed in the ‘abbreviation’ (when I Apply it and reopen this setting, the space is gone):

enter image description here